Scroll trigger visualizer

Set a start and an end

The box below is a small viewport. Scroll it, drag the slider or press Play: the element moves past the two lines, and the drawing inside it is scrollDraw itself, given your trigger and told to watch the box instead of the window.

import { scrollDraw } from 'svg-scroll-draw';

// starts when its top reaches 85% down the viewport,
// done when its top reaches 40% down the viewport.
scrollDraw('#drawing', {
  trigger: { start: 'top 85%', end: 'top 40%' },
});

How start and end become progress

Each pair becomes one scroll position: the place on the page where the element’s edge sits on the viewport’s line. That is the edge’s distance down the page minus the line’s distance down the viewport (fig. 1). An edge other than top adds part of the element’s height, half for center and all of it for bottom, so bottom bottom is the moment the element’s bottom edge comes into view: for an element shorter than the viewport, the moment all of it is on screen.

Progress is how far the scroll has got from the start position to the end one, clamped to 0–1. Scroll back and it goes back down, unless the function keeps what it has reached (once).

// One element, worked by hand: a 900px-tall window,
// and the element's top 2000px down the page.
const vh = 900;
const top = 2000;

// start: 'top 85%' — its top meets the line 85% down the window.
const startAt = top - 0.85 * vh;   // 1235

// end: 'top 40%' — the same edge meets the line 40% down.
const endAt = top - 0.40 * vh;     // 1640

// In between, progress follows the scroll in a straight line.
const progress = Math.min(1, Math.max(0, (scrollY - startAt) / (endAt - startAt)));

Every form the trigger accepts

The parser reads the first two words, split on spaces. The element’s word is top, center or bottom, and anything else is read as top. The viewport’s word is one of the same three or digits followed by %, decimals allowed (85.5%, not .5% or -10%), and anything else is read as bottom. A percentage on its own is the viewport’s line, for the element’s top. The parser does not warn when a word falls back, so the “read as” column is worth a look.

The default window of each function

Leave trigger out and each function uses its own window. scrollDraw, scrollAnimate and the progress ones run the whole time the element is on screen; text, reveals and counters finish while it is still well in view, where a reader is looking; scrollVideo scrubs from the moment its top reaches the top of the viewport.

Compared with GSAP ScrollTrigger

The two-word form is ScrollTrigger’s, so a trigger written with keywords and viewport percentages means the same in both: 'top center' is 'top center'. They part over everything else ScrollTrigger accepts. Described against GSAP 3.15.0.

// GSAP ScrollTrigger
gsap.to('#chart', {
  opacity: 1,
  scrollTrigger: {
    trigger: '#chart',
    start: 'top center',
    end: 'bottom center',
    scrub: true,
  },
});

// svg-scroll-draw: the same two words, on the element itself
import { scrollAnimate } from 'svg-scroll-draw';

scrollAnimate('#chart', {
  props: { opacity: [0, 1] },
  trigger: { start: 'top center', end: 'bottom center' },
});

Scroll trigger questions

The rest of svg-scroll-draw 2.23.3: the docs, the text animation generator and the SVG path viewer.