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 runtimelottie.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 segmentanim.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 posesanim.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 dynamicallyanim.setSpeed(0.5); // sloweranim.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 animationmainAnim.addEventListener('complete', () => {  secondaryAnim.play();});
// Or sync with framemainAnim.addEventListener('enterFrame', (e) => {  if (e.currentTime > 15) particleAnim.play();});

9. Timing

anim.setSpeed(0.5);  // half speed - dramaticanim.setSpeed(1);    // normalanim.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