Scroll Reveal ideas / scroll-driven-animations ↓ Scroll Down ↓

Reusable Scroll Reveal System

This demo showcases a CSS-only scroll reveal animation system built with CSS custom properties. Everything is customizable!

Basic Fade Up (Slow)

Using the .reveal-slow class to extend the animation range.

Properties: Default translateY with extended range

Non-card Basic Fade Up (Slow)

Using the .reveal-slow class to extend the animation range.

Properties: Default translateY with extended range

From Left

Using the .reveal-from-left class.

Properties: translateX: -60px

From Right

Using the .reveal-from-right class.

Properties: translateX: 60px

Scale Effect

Using the .reveal-scale class.

Properties: scale: 0.8 → 1

Blur Effect

Using the .reveal-blur class.

Properties: blur: 10px → 0

Rotate Effect

Using the .reveal-rotate class.

Properties: rotate: -5deg → 0

Custom Inline Properties

This card uses inline custom properties for a unique combination:

Grid with Staggered Animation

Feature 1

Staggered reveal with delay

Feature 2

Staggered reveal with delay

Feature 3

Staggered reveal with delay

Quick & Subtle

Inline style with minimal movement and quick animation:

style="--reveal-translate-y: 20px; --reveal-range-end: cover 20%;"

Combined Effects

Multiple properties combined via inline styles:

Case Study Idea

Dusty cinemas play Life on Mars on repeat, where dreams audition in low gravity. Dancing in gaslight, we are the dead, chewing dreams like forgotten bubblegum.

Velvet voices echo from abandoned sound stages, a symphony of forgotten glam. You remind me of the babe—what babe? The babe with the power of retro decay. Stay here, the connection drops. The mirror cracks, but the beauty and the beast still sing, you can't say no.

The man who fell to Earth brought no answers, only glitter and existential jazz. Heroes for a day, wrapped in chrome, their silent oaths lost to the wind.

↑ Scroll Up to See Again ↑

Customizable Properties

--reveal-opacity-from: Starting opacity (default: 0)

--reveal-opacity-to: Ending opacity (default: 1)

--reveal-translate-y: Vertical movement (default: 40px)

--reveal-translate-x: Horizontal movement (default: 0px)

--reveal-scale: Starting scale (default: 1)

--reveal-rotate: Starting rotation (default: 0deg)

--reveal-blur: Starting blur (default: 0px)

--reveal-range-start: When animation starts (default: entry 0%)

--reveal-range-end: When animation ends (default: cover 30%)

--reveal-easing: Easing function (default: linear)