v2.7 · scrollSnap · horizontalCSS scroll-snap is excellent until you need to know which slide you landed on, or want easing other than the browser default. scrollSnap keeps the drag feel but adds a threshold you control, custom easing, and an onSnap callback — which is what the dot indicators in this example are wired to, rather than polling scroll position.
Drag or swipe between cards — scrollSnap detects when you pass the threshold and smoothly animates to the nearest card with custom easing. Dot indicators update via onSnap callback.
import { scrollSnap } from 'svg-scroll-draw/snap';
// Horizontal card carousel with custom easing
const snap = scrollSnap('.card', {
direction: 'horizontal',
duration: 400,
easing: 'ease-out',
threshold: 0.3, // snap if user dragged >30% of card width
onSnap: (index) => setActiveCard(index),
});
// Vertical section snapping (fullscreen sections)
scrollSnap('.section', {
duration: 600,
easing: 'ease-in-out',
onSnap: (i) => history.replaceState(null, '', `#section-${i}`),
});
// Programmatic control
snap.snapTo(2); // jump to index 2 with animation
snap.getCurrentIndex(); // → currently snapped index
snap.destroy();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 →
Sticky pinned section on scroll
Pin an element while the page scrolls past it — the Apple and Stripe walkthrough pattern. Wrapper-based, no layout shift, full lifecycle callbacks.
Video scrubbing on scroll
Scrub a video frame by frame with scroll position, the Apple product-page effect. scrollVideo binds currentTime to scroll in one call.