lottie-bodymovin

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] // Control at runtime lottie.setSpeed(1.5); // affect squash timing

1. Anticipation

Structure your AE composition:

Frames 0-10: Wind-up pose Frames 10-40: Main action Frames 40-50: Settle // Play anticipation segment anim.playSegments([0, 10], true); setTimeout(() => anim.playSegments([10, 50], true), 200);

1. Staging // Layer multiple Lotties

1. Straight Ahead / Pose to Pose

Pose to pose in AE:

Set keyframes at key poses Let AE interpolate between Use Easy Ease for smoothing // Jump to specific poses anim.goToAndStop(25, true); // frame 25

1. 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 // Adjust playback speed dynamically anim.setSpeed(0.5); // slower anim.setSpeed(2); // faster

1. 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 // Trigger secondary animation mainAnim.addEventListener('complete', () => { secondaryAnim.play(); });

// Or sync with frame mainAnim.addEventListener('enterFrame', (e) => { if (e.currentTime > 15) particleAnim.play(); });

1. Timing anim.setSpeed(0.5); // half speed - dramatic anim.setSpeed(1); // normal anim.setSpeed(2); // double speed - snappy

// Or control frame rate in AE export // 24fps = cinematic, 30fps = smooth, 60fps = fluid

1. 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(freqn) / Math.exp(decayn/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 // React Lottie with hover anim.setDirection(1)} onMouseLeave={() => anim.setDirection(-1)} />

Lottie Implementation import Lottie from 'lottie-react'; import animationData from './animation.json';

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