Intuitive API

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

  • Per property parameters
  • Flexible keyframes system
  • Built-in easings
animate('.square', { rotate: 90, loop: true, ease: 'inOutExpo', });

Enhanced transforms

Smoothly blend individual CSS transform properties.

  • Individual CSS Transforms
  • Function based values
  • Blend composition
animate('.shape', { x: () => random(-100, 100), y: () => random(-100, 100), rotate: () => random(-180, 180), composition: 'blend', });

Scroll Observer

Synchronise and trigger animations on scroll.

  • Multiple synchronisation modes
  • Advanced thresholds
  • Complete set of callbacks
animate(el, { width: '100%', autoplay: onScroll({ sync: true }), });

Advanced staggering

Create stunning effects with the Stagger utility.

  • Time staggering
  • Values staggering
  • Timeline positions staggering
createTimeline().add('.dot', { scale: stagger([1.5, .5], { grid: [13, 13], from: 'center' }), }, stagger(30, { grid: [13,13], from: 'center' }));

SVG toolset

Draw lines easily with the built-in SVG utilities.

  • Line drawing
  • createDrawable
  • draw property
animate(createDrawable('path'), { draw: ['0 0', '0 1'], duration: 2000, ease: 'inOut(3)', });

Motion path

Follow motion paths with createMotionPath.

  • SVG path following
  • Auto-rotate
  • Progress control
animate('.car', { ...createMotionPath('.circuit'), duration: 4000, loop: true, ease: 'linear', });

Shape morphing

Morph SVG shapes with morphTo.

  • Path morphing
  • Automatic point matching
  • Smooth transitions
animate('.shape-a', { d: morphTo('.shape-b'), duration: 1500, loop: true, alternate: true, });
DRAG

Springs and draggable

Drag with the fully-featured Draggable API.

  • Versatile settings
  • Spring physics
  • Release ease
createDraggable('.circle', { releaseEase: createSpring({ stiffness: 120, damping: 6, }) });

Runs like clockwork

Orchestrate animation sequences with Timeline.

  • Synchronise animations
  • Advanced time positions
  • Playback settings
createTimeline() .add('.second', { rotate: 360, duration: 60000, loop: true, ease: 'linear', });

Responsive animations

Make animations respond to media queries with Scope.

  • Media queries
  • Custom root element
  • Scoped methods
createScope({ mediaQueries: { portrait: '(orientation: portrait)', } }).add(({ matches }) => { const isPortrait = matches.portrait; animate('.circle', { y: isPortrait ? 0 : [-50, 50], }); });