Scroll-driven Animations

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

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.