juliangarnier/anime

Anime.js is a lightweight JavaScript animation library that makes it straightforward to add smooth, precise animations to web pages. The problem it addresses is that animating elements on a webpage, moving them, rotating them, fading them in, changing their colors, can be complex and repetitive when done with raw CSS or browser APIs alone, especially when you want precise timing, sequencing, or physics-like easing. Anime.js provides a clean, concise API that handles all of this with very little code. The way it works is you call the animate function, pass in a selector (targeting which HTML elements to animate, such as all elements with the class "square") or a JavaScript object, and then describe the properties you want to change and how. You can animate CSS properties like position, opacity, size, or color, SVG attributes for vector graphics, DOM element attributes, or raw JavaScript object values for use in canvas-based graphics. The library handles interpolation, the process of calculating all the intermediate values between start and end, and runs the animation at smooth frame rates in the browser. You can control duration, delay, easing curves (which affect how the animation accelerates and decelerates), looping, and alternating direction. A particularly useful feature is staggering: applying a slight delay between animating multiple elements in a group, which creates a ripple or cascading effect without requiring manual delay calculations for each element. You would use Anime.js when building interactive websites, product landing pages, UI microinteractions, data visualization animations, or any web project where you want polished motion that goes beyond what plain CSS transitions can easily express. It is installed via npm or imported directly as an ES module in the browser. The library is written in JavaScript.