I’ve discovered a widely recognized animation powerhouse in the frontend community — 68K stars are no joke!

anime.js — a lightweight yet incredibly powerful JavaScript animation engine.

Frontend developers, rejoice! This tool is essentially the “Swiss Army knife for animators”:

All-rounder
Whether it’s CSS properties, SVG, DOM attributes, or JavaScript objects, it can bring them all to life. Smooth cursor effects, complex parallax scrolling, or silky UI transitions — it handles everything.

Intuitive and lightweight API
The code writes itself with elegance, as simple as composing a timeline. Modular imports let you only include what you need, keeping your bundle tiny while delivering top performance.

Ready to use out of the box
The official site (http://animejs.com) is packed with stunning demos, each with code ready to copy in one click. Reusing them for your own projects couldn’t be easier.

Check out the camera disassembly animation demo — the smoothness is absolutely mind-blowing. Whether you’re a frontend developer or interaction designer, this library is a must-have in your toolbox.

Project link is in the comments.

Anime.js | JavaScript Animation Engine

Source: https://animejs.com/

Intuitive API

Animate faster with an easy-to-use, yet powerful animation API.

• Per property parameters (https://animejs.com/documentation/animation/tween-parameters/composition)
• Flexible keyframes system (https://animejs.com/documentation/animation/tween-parameters/composition)
• Built-in easings (https://animejs.com/documentation/animation/tween-parameters/composition)

Enhanced transforms

Smoothly blend individual CSS transform properties with a versatile composition API.

• Individual CSS Transforms (https://animejs.com/documentation/animation/animatable-properties/css-transforms)
• Function based values (https://animejs.com/documentation/animation/tween-value-types/function-based)
• Blend composition (https://animejs.com/documentation/animation/tween-parameters/composition)

Scroll Observer

Synchronise and trigger animations on scroll with the Scroll Observer API.

• Multiple synchronisation modes (https://animejs.com/documentation/events/onscroll/scrollobserver-synchronisation-modes)
• Advanced thresholds (https://animejs.com/documentation/events/onscroll/scrollobserver-thresholds)
• Complete set of callbacks (https://animejs.com/documentation/events/onscroll/scrollobserver-callbacks)

Advanced staggering

Create stunning effects in seconds with the built-in Stagger utility function.

• Time staggering (https://animejs.com/documentation/stagger/time-staggering)
• Values staggering (https://animejs.com/documentation/stagger/values-staggering)
• Timeline positions staggering (https://animejs.com/documentation/stagger/timeline-positions-staggering)

SVG toolset

Morph shapes, follow motion paths, and draw lines easily with the built-in SVG utilities.

• Shape morphing (https://animejs.com/documentation/svg/morphto)
• Line drawing (https://animejs.com/documentation/svg/createdrawable)
• Motion path (https://animejs.com/documentation/svg/createmotionpath)

Springs and draggable

Drag, snap, flick and throw HTML elements with the fully-featured Draggable API.

• Versatile settings (https://animejs.com/documentation/draggable/draggable-settings)
• Comprehensive callbacks (https://animejs.com/documentation/draggable/draggable-callbacks)
• Useful methods (https://animejs.com/documentation/draggable/draggable-methods)

Runs like clockwork

Orchestrate animation sequences and keep callbacks in sync with the powerful Timeline API.

• Synchronise animations (https://animejs.com/documentation/timeline/add-animations)
• Advanced time positions (https://animejs.com/documentation/timeline/time-position)
• Playback settings (https://animejs.com/documentation/timeline/timeline-playback-settings)

Responsive animations

Make animations respond to media queries easily with the Scope API.

• Media queries (https://animejs.com/documentation/scope/scope-parameters/mediaqueries)
• Custom root element (https://animejs.com/documentation/scope/scope-parameters/root)
• Scopped methods (https://animejs.com/documentation/scope/register-method-function)

animate('.square', { rotate: 90, loop: true, ease: 'inOutExpo', });

animate('.shape', { x: random(-100, 100), y: random(-100, 100), rotate: random(-180, 180), duration: random(500, 1000), composition: 'blend', });

`` animate(‘.car’, { …createMotionPath(‘.circuit’), });

animate(createDrawable(‘.circuit’), { draw: ‘0 1’, });

animate(‘.circuit-a’, { d: morphTo(‘.circuit-b’), }); ``

animate(createDrawable('path'), { draw: ['0 0', '0 1', '1 1'], delay: stagger(40), ease: 'inOut(3)', autoplay: onScroll({ sync: true }), });

`` const options = { grid: [13, 13], from: ‘center’, };

createTimeline() .add(‘.dot’, { scale: stagger([1.1, .75], options), ease: ‘inOutQuad’, }, stagger(200, options)); ``

createDraggable('.circle', { releaseEase: createSpring({ stiffness: 120, damping: 6, }) });

createTimeline() .add('.tick', { y: '-=6', duration: 50, }, stagger(10)) .add('.ticker', { rotate: 360, duration: 1920, }, '<');

createScope({ mediaQueries: { portrait: '(orientation: portrait)', } }) .add(({ matches }) => { const isPortrait = matches.portrait; createTimeline().add('.circle', { y: isPortrait ? 0 : [-50, 50, -50], x: isPortrait ? [-50, 50, -50] : 0, }, stagger(100)); });

• Timer: 5.60 KB
• Animation: +5.20 KB
• Timeline: +0.55 KB
• Animatable: +0.40 KB
• Draggable: +6.41 KB
• Scroll: +4.30 KB
• Scope: +0.22 KB
• SVG: 0.35 KB
• Stagger: +0.48 KB
• Spring: 0.52 KB
• WAAPI: 3.50 KB