lottie-animatorlisted

Generates professional Lottie animations from static SVGs. Replaces After Effects for motion graphics. Use when the user asks to: animate logo, create lottie, svg animation, motion graphics, wiggle animation, bounce effect, rotate animation, pulse effect, entrance animation, loading animation, loop animation, icon animation, character animation, morphing, path drawing, trim path, walking animation, run cycle, walk cycle, frame-by-frame animation, sprite animation. Supports advanced bezier curves, shape modifiers, parenting, mattes, morphing, character rigs, and professional frame-by-frame animation techniques.
rvanbaalen/skills · ★ 0 · Web & Frontend · score 63

Install: claude install-skill rvanbaalen/skills

# Lottie Animator - SVG to Motion Graphics Professional skill to create advanced Lottie animations from SVGs, eliminating the need for After Effects. ## When to Activate Activate this skill when the user requests: - Animate a logo, icon, or SVG graphic - Create motion graphics or animations - Generate Lottie JSON files - Effects: wiggle, bounce, rotate, pulse, fade, scale, morph - Entrance, loop, loading animations, or transitions - Path drawing/reveal animations (Trim Path) - Character animation, walking cycles - Shape morphing (icon transitions) - Replace After Effects workflow ## Critical: SVG Understanding Before animating ANY SVG, you MUST understand its path structure. See: [references/svg-path-mastery.md](references/svg-path-mastery.md) ### SVG Path Command Quick Reference | Command | Description | Lottie Conversion | |---------|-------------|-------------------| | M x,y | Move to | Starting vertex | | L x,y | Line to | Vertex with zero tangents | | C cp1 cp2 end | Cubic bezier | Native support | | Q ctrl end | Quadratic bezier | Convert to cubic | | A rx ry ... | Arc | Split into cubic segments | | Z | Close path | Set `c: true` | ### Path to Lottie Vertex Formula ``` For C x1,y1 x2,y2 x,y from point (px, py): - Previous vertex outTangent: [x1-px, y1-py] - Current vertex: [x, y] - Current vertex inTangent: [x2-x, y2-y] ``` ## Main Workflow ### Phase 1: Motion Philosophy (30 seconds) **MANDATORY** before any code. Define: 1. **Brand Personality**: Profess