skills.rest
NoManPlay
NoManPlayCOMMUNITY
Explore all skills by this author →
GitHub

animejs

Implement and validate Anime.js v4 animations with teardown-safe integration.

Updated Mar 27, 2026
Search Tags:#anime.js#web-motion#waapi#animation-migration#scroll-linked#svg-animation#react-cleanup
One-click install
npx skills add https://github.com/NoManPlay/my-skills --skill animejs-nomanplay
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animejs
Source: https://github.com/NoManPlay/my-skills/tree/main/skills/animejs
Command: npx skills add https://github.com/NoManPlay/my-skills --skill animejs-nomanplay

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you build correct, maintainable animations with Anime.js v4 while preventing common breakages from mismatched APIs, missing teardown, and incorrect animation-surface choices.

Core Features & Use Cases

  • v3-to-v4 migration guidance: Update imports and property/callback names while preserving behavior and direction semantics.
  • Animation-surface selection: Choose the narrowest Anime.js API for DOM/CSS motion, timelines, staggered lists, scroll-linked motion, text splitting, SVG drawing/path/morphing, draggable behavior, layout transitions, and imperative frame updates.
  • Teardown-safe integration: Use scope patterns, cleanup paths (including revert for splitText/scopes), and SSR/mobile-friendly guardrails to avoid leaks and broken unmounts.
  • WAAPI vs JS tradeoffs: Pick waapi.animate() only when it matches performance or payload constraints, otherwise prefer JS-driven control.

Quick Start

Use the animejs skill to migrate an existing anime.js v3 animation to Anime.js v4 and refactor it to the smallest correct API surface while ensuring proper cleanup on unmount.

Frequently Asked Questions about animejs

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

FAQPage Schema
How do I migrate anime.js v3 animations to v4 without breaking existing behavior?▼

Anime.js v3-to-v4 migration requires updating imports and property/callback names while preserving direction semantics. You must apply v4 renames and behavioral changes, ensuring existing timelines and DOM/CSS motion continue functioning correctly after the transition.

Why does my scroll-linked animation leak memory on unmount in React?▼

Scroll-linked animation leaks occur without proper teardown paths. You must ensure scope reverts, remove scroll observers, and cleanup splitText instances on unmount to prevent memory leaks and broken components.

What is the best way to choose between WAAPI and JavaScript-driven animation?▼

WAAPI vs JS animation choice depends on performance constraints. Use waapi.animate() only when it matches specific performance or payload requirements; otherwise, prefer JS-driven control for broader API flexibility.

How do I implement SVG draw and motion-path animations correctly?▼

SVG draw and motion-path animations require selecting the narrowest correct Anime.js API surface. You must target specific SVG elements and apply the appropriate v4 path utilities to execute morphing and drawing interactions.

Does Anime.js v4 support staggered list animations with timeline offsets?▼

Staggered list animations with timeline offsets are fully supported in Anime.js v4. You apply the stagger API to lists and synchronize them within timelines using precise offset values to sequence DOM motion.

Related Skills

Explore More Software Engineering Skills→
s0lci700s0lci700
1

svelte-animejs

Bridge Anime.js v4 with Svelte 5 for lifecycle-aware animations.

Community
Advanced
santimattiussantimattius
1

compose-effects

Validate Jetpack Compose side-effect usage for correct keys and cleanup.

Community
Intermediate
ThalesGroupThalesGroup
19

advanced-svg-system-design

Define SVG diagram systems with grid rules, component taxonomy, and color semantics.

Official
Advanced
ayofemiadeayofemiade

animation-designer

Create web animations and transitions using Framer Motion and CSS.

Community
Advanced