Scroll pin generator

Build a pinned feature tour

The box below is a small window. Scroll it, drag the slider or press Play: the stage pins under the pin line, the steps change as you scroll through it, and it lets go at the end. The pinning is scrollPin itself, told to follow the box, and every number beside it is what the instance reports. Pick from 2 to 6 steps.

// Made with https://svg-scroll-draw.vercel.app/scroll-pin-generator
import { scrollPin } from 'svg-scroll-draw/pin';

const stage = document.querySelector('#tour-stage');
const steps = [...stage.querySelectorAll('.tour-step')];
let current = 0;

const pin = scrollPin(stage, {
  top: 64, // pins 64px down, under a 64px header
  pinDistance: '300vh', // 4 steps, 75vh of scroll each
  onProgress: (p) => {
    // p runs 0 → 1 through the pin; each step gets an equal share of it.
    const i = Math.min(steps.length - 1, Math.floor(p * steps.length));
    stage.style.setProperty('--progress', p);
    steps.forEach((step, j) => {
      step.style.setProperty('--draw', j < i ? 1 : j > i ? 0 : p * steps.length - i);
    });
    if (i !== current) {
      steps[current].removeAttribute('aria-current');
      steps[i].setAttribute('aria-current', 'step');
      current = i;
    }
  },
});

// pin.destroy() unpins it and puts the stage back where it was.

Every scrollPin option

scrollPin(target, options) takes a selector or an element and returns an instance. Leave an option out and it takes the default; the generator leaves out every option at its default.

Before, pinned, after: what scrollPin writes

scrollPin puts the element in a div of its own, data-ssd-pin-wrapper, as tall as the element plus the pin distance. The wrapper stays in the page’s flow and keeps the room, so nothing below moves when the element pins. On each scroll frame it reads where the wrapper is on screen: progress is (top − the wrapper’s top) ÷ pinDistance, clamped to 0–1, and one of three states follows (fig. 1).

The pure CSS version, and when it is enough

position: sticky holds a stage in every current browser. Put it in a wrapper as tall as the stage plus the pin distance, give it the same top, and it sticks for exactly that much scroll: the same stretch scrollPin pins for. If the stage only has to hold still while copy beside it scrolls past, that is all it takes, and no script is the better answer.

/* The image holds still while the copy beside it scrolls.
   No script, every browser. */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start; /* stretched to the row, it would have no room to stick */
}
.feature-media {
  position: sticky;
  top: 64px; /* under a 64px header */
}

Changing the steps is the part CSS needs scroll-driven animations for. The CSS only tab gives the tall wrapper a view timeline, measured from the pin line with view-timeline-inset. On that timeline exit-crossing 0 is the moment the wrapper’s top reaches the pin line, where the pin starts, and a length after it is that much more scroll, so each step’s animation-range is its share of the pin distance, whatever the stage’s height. It sits inside @supports: where there are no scroll-driven animations the tour is a plain list, every step showing and nothing pinned.

Use it in your project

scrollPin has an entry of its own, svg-scroll-draw/pin, and the generated code imports it from there.

npm i svg-scroll-draw

Scroll pin questions

More on pinning with svg-scroll-draw 2.23.3: scroll pin without GSAP, the feature tour recipe and scrollPin in the docs.