v2 · scrollAnimateGroup · fan-out

Fan-out animation on scroll

Writing the same scrollAnimate call four times is how a card grid ends up with four observers and four subtly different start times. scrollAnimateGroup takes a selector and animates everything it matches on one shared timeline, which is both less code and measurably less work for the browser on a long page.

The code

Animate multiple HTML elements simultaneously with one call using scrollAnimateGroup. All four v2 API cards reveal together on scroll. Same options, same scroll timeline, zero boilerplate — the v2 parallel to scrollDrawGroup.

Hero.tsx

import { scrollAnimateGroup } from 'svg-scroll-draw/group';

// All four cards animate simultaneously — same props,
// same trigger, one call.
const group = scrollAnimateGroup(
  [card1El, card2El, card3El, card4El],
  {
    props: {
      opacity:   [0, 1],
      transform: ['translateY(28px)', 'translateY(0)'],
    },
    easing: 'ease-out',
    once:   true,
  }
);

// Full instance API works across the entire group
group.replay();   // replay all
group.pause();    // pause all
group.destroy();  // cleanup on unmount

Live — scroll it

🎯scrollAnimateAny CSS property

🔢scrollCounterAnimated numbers

📝scrollTextSplit + stagger

🎬scrollVideoScrub video

Install

terminal

npm i svg-scroll-draw

MIT licensed, zero runtime dependencies. Every API is a separate entry point, so you only ship what you import. Full API reference →

Related examples

Animate any CSS property on scroll

Drive opacity, transform, colour or any unit value from scroll position. Staggered per-element triggers build a natural reveal. Copy-paste code.

Card cascade reveal on scroll

Fade and cascade elements into view with one scrollReveal call. A 3.9 KB, typed replacement for AOS and ScrollReveal.js — no data attributes.

← All examples