Scroll Effect
Twenty-four scroll effects — reveals, parallax, a progress bar, sticky stacking cards, a sideways track, text that fills in — on scroll-driven timelines. Free, MIT · 3D and motion › Motion for any component
Motion driven by the scroll: content that enters as it scrolls into view, follows the scroll while it passes — parallax, a reading progress bar, sticky cards that recede, a pinned track that runs sideways, text that fills line by line — or leaves as it scrolls out, with one of twenty-four presets. Each preset is Web Animation keyframes on a scroll-driven timeline (the engine of CSS animation-timeline: view() / scroll()), so the browser plays it from the scroll position with no script per frame; without scroll timelines, entrances play on a timer as they come into view and the rest follow a listener that runs only while the element is on screen and never in a hidden tab. Transform and opacity first (the masks, text-fill and blur say so in their cost). On machines without GPU compositing each preset plays its one-layer CPU variant. Reduced motion: the content at rest, only the progress bar keeps following.
Installation
npx valyro-cli@latest add scroll-effectnpx shadcn@latest add https://valyro.xyz/r/scroll-effect.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { ScrollEffect } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
preset | ScrollEffectPreset | 'fade-up' | How the content answers the scroll: enters as it scrolls into view (fade-up, scale-in…), follows the scroll while it passes (parallax, progress, stack, horizontal, text-fill…) or leaves as it scrolls out at the top (fade-out…). Seven presets are free; the other seventeen need ValyroUI Pro. |
strength | number | 1 | Multiplies the preset's travel, turn, zoom and blur: 0.5 is half as far, 2 twice as far. |
range | [ScrollRangePoint, ScrollRangePoint] | The stretch of the scroll that plays it, in CSS animation-range terms: ['entry 0%', 'cover 50%']. Default: the preset's own. | |
tier | PageTransitionTierSetting | 'auto' | gpu — the full preset; cpu — its one-layer variant for machines that composite on the processor (virtual machines, remote desktops, software WebGL); auto — cpu on such machines and on devices with two cores or 2 GB of memory or less, detected while the browser is idle; gpu elsewhere. |
disabled | boolean | false | Off: the content stays at rest and nothing is animated. |
Related components
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Layout Group — Jump-free reordering: filter, sort, regrid
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Page Transition — Forty transitions between pages, routes and steps — cube, carousel, circle and more — with light variants for machines without a GPU
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- Stacking Panels — Panels stick on scroll and pile into a stack
- Helix Rail — Cards on a helix that spins with scroll
- Scroll Scene — Scroll scene: a pinned screen changes step by step, with a progress rail
- Parallax Layers — Depth layers that shift with scroll and cursor
Previous: Presence · Next: Page Transition · All 3D and motion