domains / families / design / animejs-animation

animejs-animation

authentic

Advanced JavaScript animation library skill for creating complex, high-performance web animations.

When to use

• Creating complex, multi-stage landing page orchestrations.
• Implementing staggered animations for revealing grids, text, or data visualizations.
• Animating SVG paths (morphing shapes, drawing dynamic lines).
• Building highly interactive, kinetic UI elements that respond fluidly to user input.

When not to use

• The code above uses the v3 API. Anime.js v4 uses imported `createTimeline()` and a different target/parameter signature; do not mix major-version examples. Consult [official timeline documentation](https://animejs.com/documentation/timelin…
• Respect `prefers-reduced-motion`: provide a static final state, avoid scroll hijacking, and keep focus/keyboard interactions immediately usable. Dispose animations when their component unmounts.
• `will-change` is a temporary optimization hint, not a guarantee of GPU acceleration; measure real frames and avoid leaving it on every element.
• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Skill page

Source