Scroll-driven Animations 1.2.2

Trigger animations as elements scroll into view using pure CSS scroll-driven animations — no JavaScript needed. Deutsch: Scroll-gesteuert

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Progressive scroll-timeline / view-timeline effects where supported.
Always provide a non-scroll fallback; reduced-motion still applies.

When not

Do not ignore prefers-reduced-motion for decorative motion.
Do not use attention loops on large content regions — prefer CSS tokens + short durations.

Animate on Scroll

Add .velin-animate-on-scroll to trigger an animation when the element enters the viewport:

<div class="velin-animate-on-scroll velin-animate-fade-in-up">
  Fades in as you scroll down to it
</div>

Scroll Progress

Create a reading-progress bar that fills based on scroll position:

<div class="velin-scroll-progress"></div>

Parallax

Apply subtle parallax movement linked to scroll position:

<div class="velin-parallax" style="--velin-parallax-speed: 0.3">
  Moves at 30% of scroll speed
</div>

Browser Support

Scroll-driven animations require animation-timeline support (Chrome 115+, Edge 115+). Firefox and Safari are adding support. VelinStyle degrades gracefully — elements remain visible without animation in unsupported browsers.

Attributes & runtime

For scroll-triggered variants, prefer velin-reveal / initMotion() — see Motion & attributes. CSS classes here remain valid without JS.

Performance

Prefer compositor-friendly properties. The motion runtime’s IO path is usually cheaper than many independent scroll listeners.