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

2. Anticipation

Structure your AE composition:

1. Frames 0-10: Wind-up pose
2. Frames 10-40: Main action
3. Frames 40-50: Settle

// Play anticipation segment
anim.playSegments([0, 10], true);
setTimeout(() => anim.playSegments([10, 50], true), 200);

3. Staging

// Layer multiple Lotties
<div className="scene">
  <Lottie animationData={background} style={{ opacity: 0.6 }} />
  <Lottie animationData={hero} style={{ zIndex: 10 }} />
</div>

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

// Jump to specific poses
anim.goToAndStop(25, true); // frame 25

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

// Adjust playback speed dynamically
anim.setSpeed(0.5); // slower
anim.setSpeed(2); // faster

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

// Trigger secondary animation
mainAnim.addEventListener('complete', () => {
  secondaryAnim.play();
});

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