skills.rest
shige1014-dev
shige1014-devCOMMUNITY
Explore all skills by this author →
GitHub

lottie-bodymovin

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps animators and developers translate the twelve Disney animation principles into practical workflows for Lottie vector animations exported from After Effects so motion feels natural, readable, and engaging in web and app contexts.

Core Features & Use Cases

  • Principled Motion Recipes: Step-by-step guidance to implement squash and stretch, anticipation, staging, arcs, timing, exaggeration, and appeal with AE keyframes and Lottie-friendly exports.
  • Runtime Interaction Guidance: Patterns for using Lottie runtime controls such as playSegments, setSpeed, setDirection, and goToAndStop to reproduce AE timing, poses, and interactivity in React or web players.
  • Use Case: Convert an After Effects character comp into a lightweight JSON animation for a product splash, interactive mascot, or animated UI microinteraction while preserving handcrafted motion dynamics.

Quick Start

Export your After Effects composition with Bodymovin, load the resulting JSON in your app, and use Lottie runtime controls to tune squash, anticipation, and follow-through until the motion reads right.

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 vector animations?▼

Lottie runtime controls like playSegments, setSpeed, setDirection, and goToAndStop let you reproduce After Effects timing and poses in React. Use these functions to tune interactivity, adjust animation speed, and implement precise segment playback for UI microinteractions.

What's the best way to convert an After Effects composition into a Lottie JSON for React?▼

You need an exported Lottie animation JSON file generated from After Effects via the Bodymovin plugin. This JSON serves as the required input data format for implementing the twelve Disney animation principles and configuring runtime interactivity in your web or React Native apps.

Can I use Lottie animations for character motion and UI microinteractions in React Native?▼

Lottie vector animations exported from After Effects are ideal for lightweight product splash screens, interactive mascots, and animated UI microinteractions. They allow you to preserve handcrafted Disney animation dynamics while maintaining a small file footprint for web and app deployment.

Why does my Lottie animation feel unnatural after exporting from After Effects?▼

Your Lottie animation feels unnatural if the twelve Disney animation principles were not properly applied to the After Effects keyframes before Bodymovin export. Adjusting squash, stretch, anticipation, and follow-through timing within your AE composition can restore natural, readable motion dynamics.

Related Skills

Explore More Design & Creative Skills→
xingBaGanxingBaGan

lottie-bodymovin

Implement Disney's 12 animation principles in Lottie animations exported from After Effects.

Community
Intermediate
chuanyue98chuanyue98

Lottie 动画集成 (Lottie Animation Integration)

Integrate Lottie JSON animations into React with lottie-react.

Community
Intermediate
calesthiocalesthio
46.2k

lottie-bodymovin

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

Community
Intermediate
DrLuggelsDrLuggels
3

interaction-design

Design and implement microinteractions and motion design with CSS and JavaScript animation libraries.

Community
Intermediate