SVG Assembly Animator

This skill converts static SVG files into professional dynamic HTML5 animations with export capabilities. It's designed for developers looking to animate SVG assets using GSAP.

72000Updated 2mo ago

Animation

Quick InstallView Source

$ npx skills add https://github.com/vibe-motion/skills --skill svg-assembly-animator

Overview

About This Skill

SVG Assembly Animator converts static SVG vector graphics into professional HTML5 animations with viscous, dynamic motion styles. The skill analyzes SVG structure, identifies main body and detail parts, then orchestrates multi-stage animations: a scatter phase where components are ejected with extreme scaling for speed, followed by an assembly phase with staggered entrance, elastic easing, and large rotations. It generates interactive HTML files with built-in export functionality to produce transparent 1080x1080 PNG sequences at 30fps, ready for compositing in video software like After Effects or Premiere Pro using standard ffmpeg commands.

How to Use

Install using the command provided.

Use Cases

Animate SVG graphics for web applications

Create eye-catching presentations with SVG effects

Export transparent frame sequences for further use

Setup & Installation

Quick Install

Terminal

$ npx skills add https://github.com/vibe-motion/skills --skill svg-assembly-animator

Alternative Install (Git Clone)

git clone https://github.com/vibe-motion/skills

Requirements

Claude Code or compatible AI agent

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Convert the static SVG file [SVG_FILE_URL_OR_PATH] into an interactive HTML5 animation using GSAP. Include smooth transitions, keyframe animations, and a responsive layout. Export the final animation as an HTML file with embedded CSS and JavaScript. Add a play/pause button and loop controls. Use [COMPANY]'s branding and ensure it works on all modern browsers.

Example Output

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Logo - [COMPANY]</title>
    <style>
        body { margin: 0; overflow: hidden; background: #f5f5f5; }
        #logo-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; }
        #play-pause-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div id="logo-container">
        <svg id="animated-logo" viewBox="0 0 200 200" width="200" height="200">
            <path id="leaf-path" d="M100,20 C120,40 140,60 150,100 C140,140 120,160 100,180 C80,160 60,140 50,100 C60,60 80,40 100,20 Z" fill="#4CAF50"/>
            <path id="stem-path" d="M100,20 L100,180" stroke="#8BC34A" stroke-width="5"/>
        </svg>
    </div>
    <button id="play-pause-btn">Pause Animation</button>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const leaf = document.getElementById('leaf-path');
            const stem = document.getElementById('stem-path');
            const btn = document.getElementById('play-pause-btn');
            let isPlaying = true;

            // Animate leaf swaying
            gsap.to(leaf, {
                duration: 3,
                rotation: 5,
                transformOrigin: 'center',
                repeat: -1,
                yoyo: true,
                ease: "sine.inOut"
            });

            // Animate stem growing
            gsap.from(stem, {
                duration: 2,
                strokeDasharray: 200,
                strokeDashoffset: 200,
                ease: "power2.out"
            });

            // Toggle animation
            btn.addEventListener('click', () => {
                if (isPlaying) {
                    gsap.globalTimeline.pause();
                    btn.textContent = 'Play Animation';
                } else {
                    gsap.globalTimeline.resume();
                    btn.textContent = 'Pause Animation';
                }
                isPlaying = !isPlaying;
            });
        });
    </script>
</body>
</html>
```

Apply to these tools

Browse all tools

Assembly

Foster employee recognition with peer-to-peer rewards and insightful analytics for engagement.

Assembly HOA

AI-powered management for HOAs

Compatible MCP servers

Browse all MCP servers

Find the right skills for your stack

Take a free 3-minute scan and get personalized AI skill recommendations.

Take free scan

Overview

About This Skill

How to Use

Install using the command provided.

Use Cases

Animate SVG graphics for web applications

Create eye-catching presentations with SVG effects

Export transparent frame sequences for further use

Quick Install

Terminal

$ npx skills add https://github.com/vibe-motion/skills --skill svg-assembly-animator

Alternative Install (Git Clone)

git clone https://github.com/vibe-motion/skills

Requirements

Claude Code or compatible AI agent

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Convert the static SVG file [SVG_FILE_URL_OR_PATH] into an interactive HTML5 animation using GSAP. Include smooth transitions, keyframe animations, and a responsive layout. Export the final animation as an HTML file with embedded CSS and JavaScript. Add a play/pause button and loop controls. Use [COMPANY]'s branding and ensure it works on all modern browsers.

Example Output

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Logo - [COMPANY]</title>
    <style>
        body { margin: 0; overflow: hidden; background: #f5f5f5; }
        #logo-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; }
        #play-pause-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div id="logo-container">
        <svg id="animated-logo" viewBox="0 0 200 200" width="200" height="200">
            <path id="leaf-path" d="M100,20 C120,40 140,60 150,100 C140,140 120,160 100,180 C80,160 60,140 50,100 C60,60 80,40 100,20 Z" fill="#4CAF50"/>
            <path id="stem-path" d="M100,20 L100,180" stroke="#8BC34A" stroke-width="5"/>
        </svg>
    </div>
    <button id="play-pause-btn">Pause Animation</button>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const leaf = document.getElementById('leaf-path');
            const stem = document.getElementById('stem-path');
            const btn = document.getElementById('play-pause-btn');
            let isPlaying = true;

            // Animate leaf swaying
            gsap.to(leaf, {
                duration: 3,
                rotation: 5,
                transformOrigin: 'center',
                repeat: -1,
                yoyo: true,
                ease: "sine.inOut"
            });

            // Animate stem growing
            gsap.from(stem, {
                duration: 2,
                strokeDasharray: 200,
                strokeDashoffset: 200,
                ease: "power2.out"
            });

            // Toggle animation
            btn.addEventListener('click', () => {
                if (isPlaying) {
                    gsap.globalTimeline.pause();
                    btn.textContent = 'Play Animation';
                } else {
                    gsap.globalTimeline.resume();
                    btn.textContent = 'Pause Animation';
                }
                isPlaying = !isPlaying;
            });
        });
    </script>
</body>
</html>
```

SVG Assembly Animator

Overview

About This Skill

How to Use

Use Cases

Tags

Setup & Installation

Quick Install

Alternative Install (Git Clone)

Requirements

Quick Start Guide

Install the Skill

Open Your AI Agent

Try It Out

Customize

Usage Examples

Prompt Template

Example Output

Apply to these tools

Assembly

Assembly HOA

Compatible MCP servers

s

s

s

Find the right skills for your stack

SVG Assembly Animator

Overview

About This Skill

How to Use

Use Cases

Tags

Setup & Installation

Quick Install

Alternative Install (Git Clone)

Requirements

Quick Start Guide

Install the Skill

Open Your AI Agent

Try It Out

Customize

Usage Examples

Prompt Template

Example Output

Apply to these tools

Assembly

Assembly HOA

Compatible MCP servers

s

s

s

Find the right skills for your stack