Use when implementing Disney's 12 animation principles with Lottie animations exported from After Effects

Lottie Animation Principles Implement all 12 Disney animation principles using Lottie (Bodymovin) for vector animations. 1. Squash and Stretch In After Effects before export: Animate Scale X and Y inversely Use expression: s = transform.scale[1]; [100 + (100 s), s] 2. Anticipation Structure your AE composition: 1. Frames 0 10 : Wind up pose 2. Frames 10 40 : Main action 3. Frames 40 50 : Settle 3. Staging 4. Straight Ahead / Pose to Pose Pose to pose in AE: Set keyframes at key poses Let AE interpolate between Use Easy Ease for smoothing 5. Follow Through and Overlapping Action In After Effects: Offset child layer keyframes by 2 4 frames Use parenting with delayed expressions thisComp.layer("Parent").transform.position.valueAtTime(time 0.05) 6. Slow In and Slow Out AE Keyframe settings: Select keyframes Easy Ease (F9) Use Graph Editor to adjust curves Bezier handles control acceleration 7. Arc In After Effects: Use motion paths (position property) Convert keyframes to Bezier Pull handles to create arcs Or use "Auto Orient to Path" 8. Secondary Action 9. Timing 10. Exaggeration In After Effects: Push scale beyond 100% (120 150%) Overshoot rotation Use Overshoot expression amp = 15; freq = 3; decay = 5; n = 0; time start = key(1).time; if (time time start) { n = (time time start) / thisComp.frameDuration; amp Math.sin(freq n) / Math.exp(decay n/100); } else { 0; } 11. Solid Drawing In After Effects: Use 3D layers Apply perspective camera Animate Z position and rotation Use depth of field 12. Appeal Design principles in AE: Smooth curves over sharp angles Consistent timing patterns Pleasing color palette Clean vector shapes Lottie Implementation Key Lottie Features playSegments([start, end]) Play frame range setSpeed(n) Control timing setDirection(1/ 1) Forward/reverse goToAndStop(frame) Pose control addEventListener Frame events Interactivity via lottie interactivity

lottie-bodymovin