scrollDrawSequence · one after another

Animate one after another

Strict ordering is what separates a sequence from a stagger: step two must not begin until step one has genuinely reached 100%, however fast or slow the reader scrolls. Hand-tuned delays cannot promise that, because the timing depends on scroll speed. scrollDrawSequence chains on completion instead, so the order holds at any pace.

The code

Three steps — Code, Build, Ship — draw in strict sequence: each one starts only after the previous reaches 100%. The border and label color up as each step completes. Uses scrollDrawSequence with onComplete to track state.

Hero.tsx

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

// Each container starts drawing only after
// the previous one fully completes.
const seq = scrollDrawSequence(
  [codeRef.current, buildRef.current, shipRef.current],
  {
    easing:     'ease-out',
    speed:      1.4,
    fade:       true,
    trigger:    { start: 'top 88%', end: 'top 25%' },
    onComplete: () => setStep((s) => s + 1),
  }
);

seq.replay();   // restart from step 1
seq.destroy();  // cleanup on unmount

Live — scroll it

Code

Build

Ship

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 multiple SVGs together

Wire several separate SVG containers to one scroll timeline with scrollDrawGroup. They start together, no matter where they sit in the DOM.

Independent scroll timelines

Give every element its own slice of the scroll range. scrollDrawTimeline maps each track to a start and end percentage — like keyframes for scroll.

← All examples