Animation Assistant

Animation Assistant

# Animation Assistant

Animation Assistant is a complete 2D animation pipeline skill. It replaces the need to manually prompt for animation workflows, easing calculations, sprite sheet packing, CSS keyframe generation, and Lottie manipulation. Instead of describing what you want frame by frame, you give high-level direction and the skill handles the technical translation.

Animation workflows are fragmented. Designers and developers jump between tools: After Effects for motion design, a sprite sheet packer for game assets, CSS generators for web animations, and Lottie editors for app animations. Each tool has its own syntax, export format, and learning curve. The result is context switching costs, format conversion headaches, and inconsistent animation quality across platforms. This skill consolidates the entire 2D animation pipeline into one skill. Keyframe calculations, easing curves, sprite sheet packing, Lottie manipulation, CSS animation generation, and video export orchestration all live in one place with consistent syntax.

What It Does

• Generates keyframes with configurable interpolation (linear, bezier, step, spring)
• Produces easing curve value tables for any standard or custom easing function
• Packs and slices sprite sheets with metadata output (JSON/XML)
• Manipulates Lottie JSON files: extract layers, rescale, recolor, change speed
• Generates CSS @keyframes production-ready with vendor prefixes
• Creates animated SVG output with SMIL or CSS-driven motion

Frameworks / Standards Covered

| Standard | Coverage | Application | |---|---|---| | CSS @keyframes | Full | Web animation export with vendor prefixes | | Lottie JSON (Bodymovin) | Full | Import, export, edit, validate | | SMIL Animation | Full | SVG animation generation | | Lottie Schema v5.5.x | Validation | Structure and property validation | | SVG 1.1 | Full | Path data, transforms, animation elements | | Web Animations API | Concepts | Timing model, easing, keyframe structure | | Spritesheet (JSON Hash/Array) | Full | TexturePacker-compatible metadata | | MP4/H.264/H.265 | Export | Video encoding parameters | | GIF89a | Export | Palette optimization, frame timing |

Quick Start

```bash
# Generate a CSS bounce animation
python3 scripts/animation_cli.py css --name bounce --type bounce --duration 1.2

# Generate easing curve values
python3 scripts/animation_cli.py easing --type cubic-bezier --params "0.42,0,0.58,1" --steps 10

# Pack a sprite sheet from frames
python3 scripts/animation_cli.py sprite --input ./frames/ --output ./sheet.png --format json-hash

# Validate a Lottie file
python3 scripts/animation_cli.py validate --input animation.json

# Manipulate a Lottie animation
python3 scripts/animation_cli.py lottie --input anim.json --speed 1.5 --color "#ff0000" --output anim_fast.json
```

Configuration

Edit `config/animation-config.yaml` to set defaults: ```yaml # Default export settings defaults: fps: 30 width: 1920 height: 1080 easing: "ease-in-out" sprite_format: "json-hash" css_prefixes: true lottie_version: "5.5.7" # Output paths output: sprite_dir: "./output/sprites/" css_dir: "./output/css/" lottie_dir: "./output/lottie/" video_dir: "./output/video/" ```

Output Format

### CSS Animation Output ```css /* Generated by Animation Assistant */ @keyframes bounce { 0% { transform: translateY(0px); animation-timing-function: ease-out; } 25% { transform: translateY(-120px); animation-timing-function: ease-in; } 50% { transform: translateY(0px); animation-timing-function: ease-out; } 75% { transform: translateY(-60px); animation-timing-function: ease-in; } 100% { transform: translateY(0px); animation-timing-function: ease-out; } } .bounce-element { animation: bounce 1.2s ease-in-out infinite; } ``` ### Sprite Sheet Metadata (JSON Hash) ```json { "frames": { "walk_01.png": { "frame": {"x": 0, "y": 0, "w": 64, "h": 64}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x": 0, "y": 0, "w": 64, "h": 64}, "sourceSize": {"w": 64, "h": 64}, "duration": 100 } }, "meta": { "app": "animation-assistant", "version": "1.0", "image": "sheet.png", "size": {"w": 256, "h": 256}, "scale": "1" } } ``` ### Easing Curve Table ``` Frame | Value | Velocity 0 | 0.000 | 0.000 1 | 0.019 | 0.038 2 | 0.076 | 0.076 3 | 0.168 | 0.112 4 | 0.292 | 0.146 5 | 0.446 | 0.178 6 | 0.587 | 0.162 7 | 0.720 | 0.128 8 | 0.848 | 0.082 9 | 0.952 | 0.040 10 | 1.000 | 0.000 ```

Feature Breakdown

### CSS Animation Generator Generates production-ready CSS @keyframes from animation type definitions. Supports bounce, fade, slide, scale, rotate, shake, flip, pulse, and custom multi-keyframe sequences. Automatically adds -webkit- vendor prefixes. Outputs both the @keyframes rule and a ready-to-use CSS class. Accepts parameters for duration, easing, delay, iteration count, direction, and fill mode. ### Easing Curve Calculator Computes value tables for any easing function. Supports CSS named easings (ease, ease-in, ease-out, ease-in-out), cubic-bezier curves, spring physics, step easing, and custom polynomial functions. Outputs a table of frame-by-frame values with velocity deltas for debugging motion smoothness. Can also generate CSS code for custom cubic-bezier easings. ### Sprite Sheet Packer Packs individual frame images into a single sprite sheet with configurable packing algorithm. Supports max rects, best short side fit, and simple grid modes. Outputs metadata in both JSON hash and JSON array formats (TexturePacker compatible). Handles rotated frames, trimmed transparent pixels, padding, and margin settings. Can also slice existing sprite sheets back into individual frames. ### Lottie Manipulator Reads, edits, and writes Lottie animation JSON files. Supports changing playback speed, scaling all dimensions, recoloring layers, extracting individual layers, and merging multiple Lottie animations. Also validates Lottie files against the Lottie Schema specification, checking for required properties, correct types, and valid ranges. ### SVG Animation Generator Creates animated SVG output with CSS animations embedded in the SVG or SMIL animation elements. Supports animating position, rotation, scale, opacity, fill color, stroke properties, and path morphing (d attribute animation). Outputs standalone SVG files or inline SVG code. ### Frame Interpolation Computes intermediate frames between keyframes using linear, bezier, or step interpolation. Takes a start and end keyframe with properties (x, y, scale, rotation, opacity) and outputs N intermediate frames as a JSON array. Useful for feeding data into game engines or custom renderers. ### Batch Processing Processes entire directories of animation assets. Can batch-convert, batch-validate, batch-export across all supported formats. Reports progress and errors per file.

Why This Beats Prompting It Yourself

Prompting Raw Animation Assistant --- --- --- CSS keyframes Must write each keyframe manually, calculate percentages, add vendor prefixes Generates complete, prefixed @keyframes from one command Easing math Must compute cubic bezier values manually or use external calculator 2 commands with optional frame-by-frame table output Sprite sheets Must write or find a packing algorithm, format metadata manually Automated packing with multiple output formats Lottie editing Must traverse JSON structure manually, know the schema Programmatic manipulation with validation SVG animation Must know SMIL syntax, calculate path data Generates from high-level animation types Cross-format Manual conversion between formats (Lottie > CSS, SVG > sprite) One-command format conversion Consistency Inconsistent output across different prompting sessions Reproducible, deterministic output

Use Cases

• Web developer generating CSS animations for a landing page — generates bounce, fade, and slide animations with one command each, pastes directly into stylesheet
• Game developer packing character sprite sheets — drops 24 walk cycle frames into the tool, gets a packed sheet with JSON metadata ready for the game engine
• Motion designer editing Lottie files for a mobile app — changes animation speed and recolors brand elements across 20 Lottie files in one batch command
• UI designer prototyping micro-interactions — generates easing curves and motion paths to share with developers as spec
• Frontend developer building animated SVG icons — generates animated SVG files with CSS or SMIL from simple animation type descriptions