AnimeJs v4 Is Here

Summary

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 Stagger +0.48 KB SVG 0.35 KB Spring 0.52 KB WAAPI 3.50 KB