AnimeJs v4 Is Here

2 months ago 3

Intuitive API

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

Enhanced transforms

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

SVG toolset

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

Scroll Observer

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

Advanced staggering

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

Springs and draggable

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

Runs like
clockwork

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

Responsive animations

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

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)); });