Lottie Bodymovin

This bridges the gap between After Effects animation and web implementation by showing you how to apply Disney's 12 animation principles to Lottie exports. You get specific techniques for each principle, like using inverse scale expressions for squash and stretch, frame offsetting for follow through, and playSegments for anticipation timing. The really practical parts are the runtime controls, letting you trigger secondary animations on frame events, adjust speed dynamically, and handle interactivity with direction changes. If you're exporting Bodymovin JSONs and want them to feel less robotic, this gives you the animator's toolkit in code form. It assumes you know your way around After Effects keyframes and the Graph Editor.

skills.sh installs: 652
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill lottie-bodymovin --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

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

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

SKILL.md on GitHub

Details

Repository: github.com/dylantarre/animation-principles
Categories: Design & UI/UX, Video & Audio Editing
First seen: Jun 3, 2026