skills.rest
sixscripts-ai
sixscripts-aiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

animejs

Create timeline, stagger, and SVG animations with the Anime.js JavaScript engine.

Updated Aug 12, 2026
Search Tags:#timeline#frontend#svg animation#animejs#stagger#web animations#javascript animation
One-click install
npx skills add https://github.com/sixscripts-ai/agent-arena-voice --skill animejs-sixscripts-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animejs
Source: https://github.com/sixscripts-ai/agent-arena-voice/tree/main/.claude/plugins/claudedesignskills/plugins/bundles/animation-components/skills/animejs
Command: npx skills add https://github.com/sixscripts-ai/agent-arena-voice --skill animejs-sixscripts-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires animejs, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Building choreographed web animations with vanilla JavaScript requires verbose, error-prone code for timing, easing, and sequencing. This Skill provides ready-to-use Anime.js patterns for timelines, staggers, SVG morphing, and scroll-driven animations so you can implement complex motion without reinventing the wheel. ## Core Features & Use Cases - Timeline Sequencing: Chain multi-step animations with relative offsets (+=/-=) for precise choreography of hero sections, modals, and page transitions. - Stagger & Grid Effects: Create cascading reveals, center-out grid expansions, and wave effects across multiple elements with anime.stagger. - SVG Animation: Perform path morphing, line drawing with setDashoffset, and motion-path following for vector graphics. - Use Case: You need a landing page hero where the background scales in, the title slides up, and a CTA button pops in sequence. Use the timeline pattern with overlapping offsets to choreograph all three steps in a few lines of code. ## Quick Start Ask the AI to generate an Anime.js stagger animation that reveals a grid of cards from the center with elastic easing.

Frequently Asked Questions about animejs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a stagger animation with Anime.js?▼

Use anime.stagger(delay) as the delay value to increment timing across multiple targets. For grid layouts, pass options like { grid: [cols, rows], from: 'center' } to animate outward from a specific point.

How do I chain multiple animations in Anime.js?▼

Create a timeline with anime.timeline() and chain .add() calls for each step. Use relative offsets like '-=500' to overlap animations or '+=200' to add gaps between steps.

Anime.js vs GSAP: which should I use for web animations?▼

Anime.js suits SVG-heavy animations, simpler projects, and smaller bundle sizes (~9KB gzipped). GSAP is better for complex scroll-driven experiences, advanced timelines, and professional-grade control.

Can I use Anime.js with React or Vue?▼

Yes, Anime.js is framework-agnostic and works with React, Vue, or vanilla JS. In React, run animations inside useEffect with a ref target and return animation.pause() in the cleanup function.

Why is my Anime.js transform animation not working?▼

Anime.js cannot animate the CSS transform property as a string. Use individual transform properties like translateX, rotate, and scale instead of 'transform: translateX(250px)'.

How do I animate SVG path drawing with Anime.js?▼

Set strokeDashoffset to [anime.setDashoffset, 0] on the path target. The setDashoffset helper calculates the path length automatically, creating a line-drawing effect over the specified duration.

Related Skills

Explore More Software Engineering Skills→
ayofemiadeayofemiade

animejs

Create timeline, stagger, and SVG animations with the Anime.js JavaScript engine.

Community
Intermediate
ricardohg1998-createricardohg1998-create

scroll-experience

Create scroll-driven web experiences with GSAP ScrollTrigger and parallax layers.

Community
Intermediate
pronpratanTpronpratanT

animate

Plan and implement CSS and JavaScript animations with performance and accessibility considerations.

Community
Advanced
VXerysVXerys

migrate-scroll-to-gsap

Convert scroll-driven animations from Framer Motion to GSAP ScrollTrigger in React/Next.js components.

Community
Intermediate