Animejs
Apply Anime.js patterns—Vite vanilla starter, stagger, timeline, and SVG motion—when polishing UI motion in the browser.
Overview
animejs is an agent skill for the Build phase that guides solo builders through Anime.js setup, patterns, and official examples for web UI animation.
Install
npx skills add https://github.com/freshtechbro/claudedesignskills --skill animejsWhat is this skill?
- Documents Vite vanilla JS starter with npm create vite and animejs install steps
- Curated CodePen categories: basic animations, stagger, timeline, and SVG line drawing
- Links official Anime.js documentation, collection, and GitHub repository
- Organizes examples by difficulty: property parameters, function-based values, grid stagger, timeline offsets
- Asset pack positions the agent to mirror upstream juliangarnier patterns in new features
- Four example categories: basic, stagger, timeline, and SVG animations
- Official CodePen collection linked for pattern reference
Adoption & trust: 798 installs on skills.sh; 227 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want cohesive UI motion in a vanilla or Vite frontend but do not have Anime.js APIs and example patterns at hand in the agent context.
Who is it for?
Indie builders shipping marketing sites, dashboards, or lightweight SPAs who want DOM-level animation without adopting a full motion framework.
Skip if: Native mobile apps, heavy React Spring-only codebases, or products that require physics engines or 3D scene graphs instead of DOM tweens.
When should I use this skill?
User is implementing web UI motion, staggered lists, timelines, or SVG animations with Anime.js.
What do I get? / Deliverables
You scaffold a Vite project with animejs installed and implement stagger, timeline, or SVG animations following curated official examples.
- Vite project wired with animejs dependency
- Implementation patterns aligned to official Anime.js examples
Recommended Skills
Journey fit
How it compares
Reference-and-template skill for Anime.js—not a code generator that ships a complete design system or Lottie pipeline.
Common Questions / FAQ
Who is animejs for?
Solo and indie frontend builders using coding agents who need quick, correct Anime.js recipes for web interfaces.
When should I use animejs?
During Build frontend work when you add page transitions, list staggers, timeline sequences, or SVG draw effects to a Vite or vanilla JS app.
Is animejs safe to install?
It is primarily documentation and template guidance—review the Security Audits panel on this Prism page and vet any npm packages you install from agent suggestions.
SKILL.md
READMESKILL.md - Animejs
# Anime.js - Assets This directory contains starter templates and example documentation for Anime.js animations. ## Contents ### Starter Template (Recommended) For a complete Anime.js starter template with Vite: ```bash # Create new project with Vite (vanilla JS) npm create vite@latest my-anime-app -- --template vanilla # Navigate and install cd my-anime-app npm install # Add Anime.js npm install animejs ``` ### Official Examples The Anime.js team maintains excellent examples at: - **Documentation**: https://animejs.com/documentation/ - **CodePen Examples**: https://codepen.io/collection/DxpqGJ/ - **Official Repository**: https://github.com/juliangarnier/anime ### Recommended Examples by Category **Basic Animations:** - Simple animation: https://codepen.io/juliangarnier/pen/KRwwOL - Property parameters: https://codepen.io/juliangarnier/pen/LpWPgj - Function-based values: https://codepen.io/juliangarnier/pen/gmOwJX **Stagger Animations:** - Basic stagger: https://codepen.io/juliangarnier/pen/PboRJN - Stagger from center: https://codepen.io/juliangarnier/pen/WNNwQa - Grid stagger: https://codepen.io/juliangarnier/pen/JXaKpP - Stagger easing: https://codepen.io/juliangarnier/pen/QMMmQK **Timeline Animations:** - Basic timeline: https://codepen.io/juliangarnier/pen/grVWYq - Timeline offsets: https://codepen.io/juliangarnier/pen/xLOXJX - Timeline controls: https://codepen.io/juliangarnier/pen/oWjmWd **SVG Animations:** - Line drawing: https://codepen.io/juliangarnier/pen/XdqyNw - Path morphing: https://codepen.io/juliangarnier/pen/mWEOmL - Motion path: https://codepen.io/juliangarnier/pen/NqYKQL **Advanced Patterns:** - Keyframes: https://codepen.io/juliangarnier/pen/QMMmQK - Scroll-driven: https://codepen.io/juliangarnier/pen/ZqyEJw - Custom easing: https://codepen.io/juliangarnier/pen/YBBRvG ## Quick Start Template Minimal Anime.js setup: ### package.json ```json { "name": "animejs-starter", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "animejs": "^3.2.2" }, "devDependencies": { "vite": "^5.0.8" } } ``` ### index.html ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Anime.js Starter</title> <link rel="stylesheet" href="/style.css"> </head> <body> <div class="container"> <h1>Anime.js Animation Demo</h1> <div class="example basic-animation"> <h2>Basic Animation</h2> <div class="box box1"></div> <button id="basic-btn">Play</button> </div> <div class="example stagger-animation"> <h2>Stagger Animation</h2> <div class="stagger-grid"> <div class="stagger-item"></div> <div class="stagger-item"></div> <div class="stagger-item"></div> <div class="stagger-item"></div> <div class="stagger-item"></div> <div class="stagger-item"></div> </div> <button id="stagger-btn">Play</button> </div> <div class="example timeline-animation"> <h2>Timeline Animation</h2> <div class="timeline-elements"> <div class="timeline-box box1"></div> <div class="timeline-box box2"></div> <div class="timeline-box box3"></div> </div> <button id="timeline-btn">Play</button> </div> </div> <script type="module" src="/main.js"></script> </body> </html> ``` ### main.js ```javascript import anime from 'animejs/lib/anime.es.js' // Basic Animation document.getElementById('basic-btn').addEventListener('click', () => { anime({ targets: '.box1', translateX: 250, rotate: '1turn', scale: [0.75, 1], duration: 800, easing: 'easeInOutQuad' }) }) // Stagger Animation document.getElementById('stagger-btn').addEventListener('click', () => { anime({ targets: '.stagger-item', scale: [0, 1], delay: anime.st