skills.rest
calesthio
calesthioCOMMUNITY
Explore all skills by this author →
𝕏@calesthioailabsGitHub

lottie-bodymovin

Apply Disney's 12 animation principles to Lottie JSON for web and React.

46.2k|5.7k|Updated Mar 29, 2026
Search Tags:#principles#animation#lottie#after-effects#bodymovin#lottie-react
One-click install
npx skills add https://github.com/calesthio/OpenMontage --skill lottie-bodymovin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lottie-bodymovin
Source: https://github.com/calesthio/OpenMontage/tree/main/.agents/skills/lottie-bodymovin
Command: npx skills add https://github.com/calesthio/OpenMontage --skill lottie-bodymovin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides actionable guidance to apply Disney's 12 animation principles to vector animations exported from After Effects as Lottie (Bodymovin) JSON, enabling more natural, expressive motion in web and app contexts.

Core Features & Use Cases

  • Principle-to-Implementation Mapping: Concrete techniques for squash and stretch, anticipation, arcs, timing, follow-through, secondary action, and appeal within After Effects and in exported Lottie runtime.
  • Runtime Control & Interactivity: Recipes for segment playback, speed and direction control, frame targeting, and event-driven secondary animations for Lottie and lottie-react integrations.
  • Use Case: Turn an After Effects character comp into a lightweight interactive web animation that preserves motion appeal, timing, and responsiveness across devices.

Quick Start

Apply the lottie-bodymovin skill to my After Effects composition to export a Lottie JSON that implements squash and stretch, anticipation, and runtime segment playback for web integration.

Frequently Asked Questions about lottie-bodymovin

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply Disney's 12 animation principles to Lottie animations in After Effects?▼

To apply Disney's 12 animation principles to Lottie animations, map squash and stretch, anticipation, and arcs within After Effects before exporting as Bodymovin JSON for web playback.

Can I control Lottie animation playback speed and direction at runtime with lottie-react?▼

Yes, you can control Lottie animation playback at runtime using lottie-react by implementing recipes for segment playback, speed adjustments, direction control, and frame targeting via goToAndStop.

What is the best way to synchronize event-driven secondary actions in exported Lottie JSON?▼

The best way to synchronize event-driven secondary actions in Lottie JSON is using lottie-interactivity recipes that bind secondary animations to specific playback events and runtime triggers.

Does the Bodymovin export from After Effects preserve timing and follow-through for web integrations?▼

Yes, Bodymovin export preserves timing and follow-through for web integrations by encoding After Effects vector motion into lightweight Lottie JSON, maintaining animation appeal across devices.

How do I target specific frames in a Lottie animation using goToAndStop?▼

To target specific frames in a Lottie animation, use the goToAndStop method for pose targeting, enabling precise frame-segment playback and event-driven synchronization in web integrations.

Related Skills

Explore More Design & Creative Skills→
video-production-buddyvideo-production-buddy
602

lottie-bodymovin

Apply Disney's 12 animation principles to Lottie exports with runtime control code snippets.

Official
Intermediate
47thtechcorner47thtechcorner
21

lottie-bodymovin

Integrate Lottie vector animations into web applications with lottie-react.

Community
Intermediate
gyalamanch001agyalamanch001a

lottie-bodymovin

Design Lottie animations applying Disney's 12 animation principles to After Effects and Bodymovin exports.

Community
Intermediate
mgd34msumgd34msu
4

lottie

Renders After Effects animations as JSON files for web and mobile via lottie-web.

Community
Intermediate