animejs

The animejs skill provides guidance for creating web animations with Anime.js, a lightweight (~9KB gzipped) JavaScript animation engine that works with DOM elements, CSS properties, SVG attributes, and plain JavaScript objects. It solves the problem of building precise, choreographed, framework-agnostic animations, and is positioned as an alternative to GSAP for SVG-heavy animations and React-independent projects.

The skill documents the core anime() function, ways to specify targets (CSS selectors, DOM nodes, arrays, and JS objects), and animatable properties spanning individual CSS transforms, SVG attributes for path morphing and line drawing, and DOM attributes. It covers timelines with relative positioning offsets, powerful stagger utilities including grid and from-center effects, keyframes, and rich easing including spring physics, steps, and cubic-bezier. Beyond the SKILL.md, it bundles reference documents (a full API reference, timeline guide, and stagger guide), an assets README, and two Python helper scripts (a timeline builder and an animation generator) that assist in producing animation code. The Python scripts observed in the scan generate animation code and contain no shell execution, network calls, or file-destructive operations.

It targets frontend and web developers, designers, and creative coders building timeline-based sequences, staggered reveals, SVG morphing and drawing, keyframe animations, and complex choreography across React, Vue, or vanilla JavaScript. Use cases include hero animations, SVG illustrations, grid stagger effects, and multi-step sequences where precise timing control matters.