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();
});

9. 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

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

// React Lottie with hover
<Lottie
  animationData={data}
  onMouseEnter={() => anim.setDirection(1)}
  onMouseLeave={() => anim.setDirection(-1)}
/>

Lottie Implementation

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

<Lottie
  animationData={animationData}
  loop={true}
  autoplay={true}
  style={{ width: 200, height: 200 }}
/>

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