Anime.js Animation Design & Preview

Problem

When building front-end motion, the hard part is often not “can we animate it,” but turning a desired effect into a reviewable demo and clean project code. Anime.js can animate CSS properties, DOM elements, SVG paths, and timelines, but easing options, timeline syntax, and parameters are easy to scatter across documentation. Without a consistent workflow, demos and final code can drift apart, or the generated code may lack the CDN, structure, and comments needed for reuse.

How It Works

The skill works through three stages: clarify requirements, show an interactive preview, and generate complete code.
- It first asks what elements should animate, what effect is needed, how long it should run, and whether it loops.
- It can use show_widget to create a self-contained HTML widget, loading animejs@3.2.2 from a CDN, with buttons or auto-play to trigger the animation.
- It then produces a copy-ready HTML and JavaScript file, including animated elements, anime() configuration, and necessary comments.
It supports common patterns such as transform, stagger, SVG path animation, and timelines, and can consult references/api_reference.md and references/examples.md when checking properties or examples.

Boundaries

This is useful for UI motion, prototype demos, and front-end code sketches, not a replacement for a production animation system. The output assumes an HTML/CSS/JS environment and dependency on Anime.js; if your project uses another animation library, build constraints, or accessibility requirements, extra adaptation is needed. The provided material does not describe complex interaction design, performance optimization, or cross-browser testing, so validate behavior in the real target environment.