Lottie Animator

When to use

Use when an SVG needs to move: logo and icon animation, loading spinners, entrance and loop effects, path-drawing reveals, icon morphs, and character work such as walk and run cycles. Output is Lottie JSON, so it replaces an After Effects round-trip.

How it works

1. Motion philosophy — pins down personality, emotional response, and motion metaphor before any JSON is written
2. SVG analysis — structure, viewBox, vertex counts, path commands, hierarchy, and which parts can move independently
3. Strategy selection — draw-on, pop-in, morph, stagger, character rig, loader, or frame-by-frame
4. JSON authoring — SVG path commands converted to Lottie vertices with in/out tangents
5. Easing — named bezier tangent pairs per use case (entrance, exit, loop, bounce, spring)
6. Validation — JSON parsed and previewed at lottiefiles.com/preview

Capabilities

• Trim path, repeater, and offset path shape modifiers
• Frame-by-frame animation via ip/op layer switching — the recommended route for walk cycles and shapes too complex to morph cleanly
• Layer parenting for bone hierarchies, with child positions relative to the parent
• Path morphing between shapes with matching vertex counts
• Track mattes — alpha, alpha-inverted, luma, luma-inverted
• Animation principles — anticipation, squash and stretch with volume preservation, staggered timing, follow-through with overshoot
• Recipes — loading spinner, checkmark draw, heart beat, icon pop-in with bounce
• Icon library notes for Phosphor and Lucide, plus stroke-plus-fill outline styling
• Performance budgets — under 15 layers, under 20 vertices per morphing shape, under 50KB for icons

Requirements

No external services. python3 is used only to validate the generated JSON.

Invoke

/lottie-animator:lottie-animator

Credits

Skill authored by obeskay. This marketplace only packages it for distribution; the animation techniques and reference material are their work.