skills.rest
gyalamanch001a
gyalamanch001aCOMMUNITY
Explore all skills by this author →
GitHub

lottie-bodymovin

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

Updated Apr 2, 2026
Search Tags:#motion design#lottie#after effects#animation principles#bodymovin#vector animation
One-click install
npx skills add https://github.com/gyalamanch001a/pur-new --skill lottie-bodymovin-gyalamanch001a
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lottie-bodymovin
Source: https://github.com/gyalamanch001a/pur-new/tree/main/.agents/skills/lottie-bodymovin
Command: npx skills add https://github.com/gyalamanch001a/pur-new --skill lottie-bodymovin-gyalamanch001a

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps motion designers translate the 12 Disney animation principles into practical Lottie workflows, so After Effects animations feel more polished and expressive in production.

Core Features & Use Cases

  • Principle-by-Principle Guidance: Shows how to implement squash and stretch, anticipation, staging, timing, exaggeration, and the rest of the animation fundamentals.
  • After Effects to Lottie Workflow: Connects composition setup, keyframe strategy, expressions, and export considerations for Bodymovin.
  • Interactive Runtime Control: Demonstrates how to play segments, adjust speed, reverse direction, and trigger secondary motion with Lottie APIs.
  • Use Case: Build an onboarding mascot, product explainer, or UI microinteraction that feels lively instead of mechanically tweened.

Quick Start

Ask for a Lottie animation plan that applies the 12 principles to your After Effects composition and includes practical runtime controls for playback and interaction.

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, structure After Effects keyframe timing, easing, and layering to create expressive motion graphics. This ensures vector animations export cleanly via Bodymovin.

What is the best way to control Lottie animation playback speed and direction for web interfaces?▼

Control Lottie playback speed and direction using Lottie runtime APIs. You can trigger segment playback, reverse direction, and manage event-driven interactions for polished web or app experiences.

Does the Bodymovin export from After Effects support interactive event-driven motion?▼

Yes, Bodymovin exports support interactive event-driven motion. After Effects expressions and keyframe strategies translate into Lottie runtime controls, allowing segment playback and secondary motion triggers in web or app experiences.

How do I add anticipation and squash and stretch to UI microinteractions using Lottie?▼

Add anticipation and squash and stretch to UI microinteractions by applying these animation principles directly in After Effects. Set up specific keyframe timing and easing before exporting the composition via Bodymovin.

Why do my After Effects animations look mechanically tweened when exported as Lottie files?▼

Mechanically tweened Lottie exports occur when keyframe timing and easing lack animation principles like exaggeration and staging. Applying Disney's 12 principles within After Effects compositions resolves this rigid motion behavior.

Can I use After Effects expressions to build a Lottie onboarding mascot that responds to user interaction?▼

Yes, you can use After Effects expressions to build a Lottie onboarding mascot. Combine keyframe animation principles with Lottie runtime controls to trigger event-driven segment playback and secondary motion for interactive responses.

Related Skills

Explore More Design & Creative Skills→
ayofemiadeayofemiade

lottie-animations

Render After Effects animations in real-time for web and React applications.

Community
Intermediate
calesthiocalesthio
46.2k

lottie-bodymovin

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

Community
Intermediate
47thtechcorner47thtechcorner
21

lottie-bodymovin

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

Community
Intermediate
shige1014-devshige1014-dev

lottie-bodymovin

Apply Disney animation principles to Lottie JSON exports with runtime controls.

Community
Intermediate