Help us improve
Share bugs, ideas, or general feedback.
From lottie-animator
Generates professional Lottie animations from static SVGs, replacing After Effects for motion graphics. Supports bezier curves, shape modifiers, character rigs, and frame-by-frame animation.
npx claudepluginhub obeskay/lottie-animator-skill --plugin lottie-animatorHow this skill is triggered — by the user, by Claude, or both
Slash command
/lottie-animator:lottie-animatorThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Professional skill to create advanced Lottie animations from SVGs, eliminating the After Effects workflow entirely by using intelligent motion design.
Animates static logos, UI elements, icons, and social media assets using AI presets and chat-based prompts. Exports to Lottie (JSON), GIF, or MP4.
Renders After Effects animations as Lottie JSON/dotLottie files in web and React apps using lottie-web, dotlottie-web, lottie-react for icons, micro-interactions, and loaders.
Animates SVG paths with Framer Motion pathLength and CSS stroke-dasharray, morphs shapes, and creates vector effects for icons, logos, and data visualizations in React/TSX files.
Share bugs, ideas, or general feedback.
Professional skill to create advanced Lottie animations from SVGs, eliminating the After Effects workflow entirely by using intelligent motion design.
Before creating or writing any animation keyframes, you MUST align on the following checklist:
p), scale (s), rotation (r), or opacity (o).~10,000) for wiggles and squashes (skip for premium).Activate this skill when the user requests:
Decision tree:
Before animating ANY SVG, you MUST understand its path structure.
See: references/svg-to-lottie.md
| 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 |
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]
MANDATORY before any code. Define:
Example: "Fintech Logo → professional + trust → precise and controlled movement"
Example: "Music App → creative + energy → organic with rhythmic pulses"
Example: "Healthcare → calm + reliable → smooth, slow easings"
Before animating, thoroughly analyze:
# Analyze SVG structure
cat icon.svg | grep -E '<(path|g|rect|circle|ellipse|line|polyline)' | head -30
Key Questions:
| Strategy | Best For | Technique | Reference |
|---|---|---|---|
| Draw On | Stroke icons, signatures | Trim Path | references/shape-modifiers.md |
| Pop In | Logos, buttons | Scale + Opacity | references/disney-principles.md |
| Morph | Icon transitions (hamburger→X) | Path keyframes | references/professional-techniques.md |
| Stagger | Multiple elements | Delayed start times | references/disney-principles.md |
| Character | People, mascots | Parenting + bone hierarchy | references/professional-techniques.md |
| Loader | Progress, spinners | Rotation + Trim Path | references/shape-modifiers.md |
| Frame-by-Frame | Walk/run cycles, complex characters | ip/op layer switching | references/professional-techniques.md |
See: references/lottie-structure.md
Base Structure:
{
"v": "5.12.1",
"fr": 60,
"ip": 0,
"op": 120,
"w": 512,
"h": 512,
"nm": "Animation Name",
"ddd": 0,
"assets": [],
"layers": []
}
Map bezier curves and frame durations strictly using your selected archetype.
See: references/bezier-easing.md
| Use Case | Out Tangent (o) | In Tangent (i) | Rationale |
|---|---|---|---|
| Entrance (Ease Out) | [0.33, 0] | [0.67, 1] | Fast start, gentle settle |
| Exit (Ease In) | [0.55, 0.055] | [0.675, 0.19] | Gentle start, explosive departure |
| Loop (Ease In Out) | [0.645, 0.045] | [0.355, 1] | Seamless symmetrical timing |
| Bounce (Playful) | [0.34, 1.56] | [0.64, 1] | Bouncy overshoot, soft settle |
| Spring (Elastic) | [0.5, 1.5] | [0.5, 0.9] | High responsiveness, dynamic tension |
# Validate JSON structure
python3 -c "import json; json.load(open('animation.json'))"
# Preview
echo "Open in: https://lottiefiles.com/preview"
See: references/shape-modifiers.md
{
"ty": "tm",
"s": {"a": 0, "k": 0},
"e": {
"a": 1,
"k": [
{"t": 0, "s": [0], "o": {"x": [0.33], "y": [0]}, "i": {"x": [0.67], "y": [1]}},
{"t": 45, "s": [100]}
]
},
"o": {"a": 0, "k": 0},
"m": 1
}
{
"ty": "rp",
"c": {"a": 0, "k": 8},
"tr": {
"r": {"a": 0, "k": 45},
"so": {"a": 0, "k": 100},
"eo": {"a": 0, "k": 30}
}
}
{
"ty": "op",
"a": {"a": 1, "k": [{"t": 0, "s": [0]}, {"t": 30, "s": [8]}]},
"lj": 2
}
Ensure you consult specific reference documents for complex animation behaviors:
ip/op sprite frames.