skills.rest
Oatse
OatseCOMMUNITY
Explore all skills by this author →
GitHub

animejs-animation

Creates complex web animations using Anime.js timelines, staggering, and SVG path animation.

Updated May 23, 2026
Search Tags:#timeline#javascript#anime.js#svg animation#stagger#easing#web animation
One-click install
npx skills add https://github.com/Oatse/CWE-Automation --skill animejs-animation-oatse
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animejs-animation
Source: https://github.com/Oatse/CWE-Automation/tree/main/.agents/skills/animejs-animation
Command: npx skills add https://github.com/Oatse/CWE-Automation --skill animejs-animation-oatse

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires animejs.

What problem does it solve? Building multi-stage, choreographed web animations with plain CSS transitions is limited and tedious. This Skill guides the creation of timeline-based, staggered, and SVG animations using the Anime.js JavaScript engine. ## Core Features & Use Cases - Timeline Orchestration: Sequence multi-stage animations with anime.timeline() and relative or absolute offsets for overlapping motion. - Staggered Reveals: Use anime.stagger() to animate grids, text, and data visualizations with rhythmic delays. - SVG Animation: Morph shapes and draw dynamic lines by animating SVG paths. - Use Case: Build a landing page hero section where headline text fades in with staggered spring easing while a hero image scales in, all sequenced on a single timeline. ## Quick Start Use the animejs-animation skill to create a staggered hero section entrance animation with a spring-eased timeline for my landing page.

Frequently Asked Questions about animejs-animation

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

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

Create a timeline with anime.timeline() and chain .add() calls for each animation stage. Use relative offsets like '-=800' to overlap animations or absolute offsets for precise sequencing.

How to stagger animations across multiple elements in Anime.js?▼

Pass anime.stagger(100) as the delay value to offset each target element by 100 milliseconds. This creates rhythmic reveals for grids, text blocks, and lists without writing per-element timing logic.

Can Anime.js animate SVG paths and shapes?▼

Yes, Anime.js can animate SVG attributes and properties, including path morphing and line drawing via strokeDashoffset. It targets DOM elements, CSS properties, and SVGs directly.

What easing functions does Anime.js support?▼

Anime.js supports built-in easings like easeInOutQuad plus spring, elastic, and custom cubicBezier curves. Spring easing such as spring(1, 80, 10, 0) produces natural physics-based motion.

How do I keep Anime.js animations performant?▼

Animate transform and opacity properties, which run on the compositor thread, and add will-change: transform, opacity in CSS for GPU acceleration. Monitor main thread usage to avoid jank during complex timelines.

Related Skills

Explore More Design & Creative Skills→
PelekePeleke

design-pass

Apply tiered CSS and SVG styling to Slidev decks and landing pages.

Community
Intermediate
Generous-CorpGenerous-Corp
13

motion

Capture scalar values, geometry, and scroll state via runtime inspector wire.

Official
Advanced
dcl-regenesislabsdcl-regenesislabs

add-interactivity

Add click handlers, hover effects, and raycasting to Decentraland scene entities.

Official
Intermediate
zeitlinbzeitlinb

hyperframes-animation

Compose web animations using atomic motion patterns and runtime adapters.

Community
Advanced