# Anime.js

> Lightweight, modular JavaScript animation engine for CSS, SVG, and DOM elements

Anime.js is a lightweight JavaScript animation engine designed to animate DOM elements, CSS properties, SVG attributes, and JavaScript objects. It offers a modular architecture allowing developers to import only the tools they need, including timelines, scroll observers, drag interactions, and spring physics. It is widely used for creating performant, choreographed web animations without relying on heavy external dependencies.

Website: https://animejs.com/

## What it is for

- Animate DOM elements, CSS properties, and SVG paths with timelines and keyframes
- Trigger and synchronize web animations based on scroll position thresholds
- Implement draggable UI components with spring physics and release easing
- Morph SVG shapes and animate elements along custom motion paths

## Features

- Modular architecture with sub-packages like Timer, Draggable, Scroll, and Scope
- Timeline API for orchestrating and synchronizing sequential animations
- Scroll Observer API with multiple synchronization modes and thresholds
- Built-in SVG toolset for path drawing, shape morphing, and motion paths
- Draggable API with spring physics, snapping, and comprehensive callbacks
- Advanced staggering utility for values, timing, and timeline positions
- Responsive animations tied to media queries via Scope API

## Pricing

Open source. Free and open source (MIT license, supported by sponsors)

## Details

- Type: Website
- Category: [Development](https://xiry.app/topics/development.md)
- Open source: yes
- Platforms: Web, Code library
- For: Front-end developers and web designers looking for a lightweight, versatile animation library
- Alternative to: GSAP, Framer Motion, Velocity.js
- Tags: animation, javascript, svg, css, frontend, ui

## Why it was saved

- [@kalypsodesigns, 7 May 2025](https://www.instagram.com/p/DJWFDHhzGzl/): Provides a compact bundle size while supporting complex chained and multi-parameter animations across canvas and DOM elements.
- [@frontendjoe, 12 November 2023](https://www.instagram.com/reel/CzjJ5OutLw1/): Makes complex staggering effects, overlapping animations, and layered CSS transforms easy to choreograph on the web.
- [@JulianGarnier, 3 April 2025](https://x.com/JulianGarnier/status/1907817228168257854): The go-to library for animating the web; the reel of demos shows the range of what it can do.

## Compare

- [Alternatives to GSAP](https://xiry.app/alternatives/gsap.md)
- [Alternatives to Framer Motion](https://xiry.app/alternatives/framer-motion.md)

## Related

- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [GSAP](https://xiry.app/resources/gsap): High-performance JavaScript animation library for web elements, SVG, and canvas. (Website, Freemium)
- [Animating height: auto in CSS](https://xiry.app/resources/animating-height-auto-in-css): Modern CSS technique for smooth height transitions without fixed pixel heights (Tip, Free)
- [NumberFlow](https://xiry.app/resources/numberflow-2047): Animated, accessible rolling-number component built on native Intl.NumberFormat and Web Animations. (Web app, Open source)
- [COBE](https://xiry.app/resources/cobe): Lightweight 5KB WebGL globe with CSS anchor positioning support (Web app, Open source)
- [CoreUI Icons](https://xiry.app/resources/coreui-icons): Open-source icon set with over 1,500 symbols in multiple formats. (Website, Open source)

Updated 3 October 2026. Page: https://xiry.app/resources/anime-js

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.