skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

lottie-bodymovin

Implements Disney's 12 animation principles using Lottie animations exported from After Effects.

Updated Jul 16, 2026
Search Tags:#motion design#lottie#after effects#animation principles#bodymovin#lottie-react#vector animation
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill lottie-bodymovin-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lottie-bodymovin
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/lottie-bodymovin
Command: npx skills add https://github.com/X-manist/Cohmira --skill lottie-bodymovin-x-manist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires lottie-react, lottie-interactivity.

What problem does it solve? Applying classic animation principles to web and app interfaces is difficult when developers lack a structured mapping between Disney's 12 animation principles and the Lottie/Bodymovin workflow, leading to flat or unnatural motion design. ## Core Features & Use Cases - Principle-by-Principle Guidance: Covers all 12 Disney principles (squash and stretch, anticipation, staging, timing, arcs, exaggeration, and more) with concrete After Effects techniques such as Easy Ease, motion paths, parenting offsets, and overshoot expressions. - Runtime Lottie Control: Shows how to use lottie-react APIs like playSegments, setSpeed, setDirection, goToAndStop, and event listeners to control animation playback in JavaScript. - Use Case: A front-end developer building a React onboarding flow can use this Skill to structure an After Effects export with anticipation and follow-through, then trigger segment playback and hover interactions via lottie-react. ## Quick Start Use the lottie-bodymovin skill to implement squash and stretch plus anticipation in my React Lottie animation exported from After Effects.

Frequently Asked Questions about lottie-bodymovin

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

FAQPage Schema
How do I implement squash and stretch in a Lottie animation?▼

Animate Scale X and Y inversely in After Effects before export, using an expression like s = transform.scale[1]; [100 + (100-s), s]. At runtime you can adjust the perceived squash timing with lottie's setSpeed method.

How to play only part of a Lottie animation in React?▼

Use the playSegments method with a frame range, such as anim.playSegments([0, 10], true), to play a specific portion. This is useful for separating anticipation, main action, and settle phases of an animation.

Does lottie-react support interactive hover animations?▼

Yes, lottie-react supports interactivity through event handlers like onMouseEnter and onMouseLeave combined with setDirection to reverse playback. The lottie-interactivity library provides additional scroll and cursor-driven controls.

How do I add follow-through and overlapping action in After Effects for Lottie?▼

Offset child layer keyframes by 2-4 frames relative to the parent, or use parenting with delayed expressions such as valueAtTime(time - 0.05). This creates the lagging motion that reads as follow-through after Bodymovin export.

What frame rate should I use when exporting Lottie animations from After Effects?▼

Use 24fps for a cinematic feel, 30fps for standard smooth motion, or 60fps for fluid interface animation. You can also adjust perceived timing at runtime with anim.setSpeed without re-exporting.

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
Gekkos-techGekkos-tech
4

lottie-animations

Convert After Effects animations to JSON and integrate them into web and React applications.

Official
Intermediate
onymchatonymchat

swiftui-performance

Diagnose SwiftUI rendering issues and optimize view performance.

Official
Advanced
Camilo8902Camilo8902

animation-micro-interaction-pack

Provide reusable animation patterns for Tailwind CSS and Framer Motion.

Community
Intermediate