Lottie Animator Skill

Generate professional Lottie animations from SVGs using AI

Replace After Effects with intelligent motion design

Quick Start • Installation • Features • Examples

🎬 See It In Action

┌──────────────────┐          ┌──────────────────┐          ┌──────────────────┐
│                  │          │                  │          │    ✨    ✨      │
│    📄 SVG        │    →     │   🤖 Claude +    │    →     │   🚀             │
│    (static)      │          │   Lottie Skill   │          │  🔥 (animated!)  │
│                  │          │                  │          │  💨              │
└──────────────────┘          └──────────────────┘          └──────────────────┘
     rocket.svg                  "Animate this!"              rocket-animated.json

Live Demo

Bounce + Scale + Particles	Frame-by-Frame Animation	Trim Path + Draw On
Preview →	Preview →	Preview →

Try the animations yourself:

1. Download any .json from examples/
2. Drag to LottieFiles Preview
3. Watch the magic!

Or run locally:

# Open the live preview page
open assets/preview-embedded.html

Why Lottie Animator?

🚀 Quick Start: SVG to Lottie in 60 Seconds

Step 1: Grab any SVG icon

From Lucide, Phosphor, or your own design:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
     fill="none" stroke="currentColor" stroke-width="2">
  <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/>
  <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/>
  <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/>
  <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>
</svg>

Step 2: Tell Claude what animation you want

You: Create a fun rocket launch animation - bounce before launch,
     add flames, smoke particles, and twinkling stars!

Step 3: Get professional Lottie JSON

┌────────────────────────────────────────────────────────────────┐
│  ✅ Motion Philosophy: Playful + Energetic                     │
│  ✅ Animation: 60fps, 90 frames (1.5s loop)                    │
│  ✅ Layers generated:                                          │
│     • Rocket body with bounce entrance (bezier overshoot)      │
│     • Gradient flame with scale flicker                        │
│     • 2x smoke particles (fade + expand + drift)               │
│     • 3x stars (pop-in + rotate + twinkle)                     │
│  ✅ Output: rocket-animated.json (4.2KB)                       │
└────────────────────────────────────────────────────────────────┘

Animation Timeline

Frame 0-15:   🚀 Rocket bounces in (scale 0→115→100 with overshoot)
Frame 15-25:  🔥 Flames ignite, anticipation wobble
Frame 25-90:  ⬆️  LAUNCH! Rocket flies up with easing
Frame 25-75:  💨 Smoke particles expand and fade
Frame 50-90:  ✨ Stars pop in, rotate, and twinkle

Try it yourself: examples/rocket-animated.json → Drag to LottieFiles Preview

Installation

From Marketplace (Recommended)

# Add the marketplace
/plugin marketplace add obeskay/lottie-animator-skill

# Install the plugin
/plugin install lottie-animator

Local Installation

# Clone the repository
git clone https://github.com/obeskay/lottie-animator-skill.git

# Use with Claude Code
claude --plugin-dir ./lottie-animator-skill

Usage

The skill activates automatically when you request:

"Animate this SVG logo"
"Create a Lottie animation"
"Generate motion graphics for my icon"
"Make a bounce/wiggle/pulse effect"
"Create an entrance/loading/loop animation"

Features

🎨 Professional Bezier Curves

🎬 Animation Types

✨ Supported Effects

🎯 Professional Techniques (Reverse-Engineered)

Learned from analyzing professional animations like Running Cat:

Frame-by-Frame Walk Cycle:
┌─────┬─────┬─────┬─────┬─────┬─────┐
│Pose1│Pose2│Pose3│Pose4│Pose5│Pose6│ ← Each pose is a separate layer
├─────┼─────┼─────┼─────┼─────┼─────┤
│ 0-6 │6-12 │12-18│18-24│24-30│30-36│ ← ip/op frame ranges
└─────┴─────┴─────┴─────┴─────┴─────┘

📦 Example Animations

1. Rocket Animated

File: examples/rocket-animated.json | Source: Lucide rocket.svg

Layers (7):
├── Stars ×3 (pop-in + rotate + twinkle)
├── Smoke ×2 (fade + expand + drift)
├── Flame (gradient + scale flicker)
└── Rocket Body (bounce entrance → launch)

Techniques:
• Scale overshoot (bezier 0.34, 1.56) for bounce
• Staggered star timing (frame 50, 55, 60)
• Gradient fill for realistic flame
• Ease-out curve for launch deceleration

2. Chimp Walk Pro

File: examples/chimp-walk-pro.json | Technique: Frame-by-Frame

Layers (5):
├── Shadow (parent for all poses, scale pulse)
├── Pose 1 - Contact Left  (ip: 0,  op: 9)
├── Pose 2 - Passing Left  (ip: 9,  op: 18)
├── Pose 3 - Contact Right (ip: 18, op: 27)
└── Pose 4 - Passing Right (ip: 27, op: 36)

Techniques:
• Frame-by-frame (4 poses × 9 frames = 36 total)
• Shadow as parent layer (moves all children)
• Stroke + fill for outline style
• 60fps, 0.6s seamless loop

3. Bounce Entrance Template

{
  "s": {
    "a": 1,
    "k": [
      {"t": 0, "s": [0, 0], "o": {"x": [0.34], "y": [1.56]}, "i": {"x": [0.64], "y": [1]}},
      {"t": 20, "s": [110, 110]},
      {"t": 35, "s": [100, 100]}
    ]
  }
}

Copy this keyframe structure for any bounce-in effect!

🔧 Use in Your App

npm install lottie-react

import Lottie from 'lottie-react';
import rocketAnimation from './rocket-launch.json';

export default function LaunchButton() {
  return (
    <Lottie
      animationData={rocketAnimation}
      loop={false}
      style={{ width: 200, height: 200 }}
    />
  );
}

npm install vue3-lottie

<template>
  <Vue3Lottie :animationData="rocket" :loop="true" />
</template>

<script setup>
import { Vue3Lottie } from 'vue3-lottie'
import rocket from './rocket-launch.json'
</script>

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest"></script>

<lottie-player
  src="rocket-launch.json"
  background="transparent"
  speed="1"
  loop
  autoplay>
</lottie-player>

npm install lottie-react-native

import LottieView from 'lottie-react-native';

export default function Animation() {
  return (
    <LottieView
      source={require('./rocket-launch.json')}
      autoPlay
      loop
      style={{ width: 200, height: 200 }}
    />
  );
}

📚 Documentation

🔗 Resources

• Lottie Documentation - Official spec
• LottieFiles Preview - Test your animations
• Cubic Bezier Editor - Design custom easing
• Easings.net - Easing function reference
• Lucide Icons - Beautiful SVG icons
• Phosphor Icons - Flexible icon family

🤝 Contributing

Contributions welcome! Please feel free to submit a Pull Request.

# Fork and clone
git clone https://github.com/YOUR_USERNAME/lottie-animator-skill.git

# Create feature branch
git checkout -b feature/amazing-feature

# Commit and push
git commit -m 'Add amazing feature'
git push origin feature/amazing-feature

# Open PR

📄 License

MIT License - see LICENSE for details.

👤 Author

Obed Vargas

"Animate my logo with a playful bounce"