Reveal on Scroll — Without JS

Adding scroll-based animations to your website used to mean reaching for JavaScript — from scroll event listeners to Intersection Observers or third-party libraries like ScrollMagic or GSAP. But what if you could get the same effect with just pure CSS?

Meet the modern magic of CSS:

animation-timeline: view();

With this property, you can create scroll-triggered animations without a single line of JavaScript. Smooth. Performant. Declarative.

⸻

🧠 What Is animation-timeline: view();?

The animation-timeline property allows CSS animations to be driven by something other than time. When you use the special value view(), the animation is controlled by the element’s scroll position in the viewport.

That means your animation will start and progress based on how far the user has scrolled — not on a fixed duration.

⸻

✨ How It Works

Here’s a simple CSS example:

.box {
  opacity: 0;
  transform: translateY(30px);

  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;

  animation-timeline: view();
  animation-range: entry 0% cover 50%;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

This setup tells the browser:

“Start animating when this element enters the viewport, and finish when 50% of it is visible.”

The result? A scroll-synced, natural-feeling animation — all without JavaScript.

⸻

🧩 Understanding animation-range

The animation-range property lets you define when the animation should begin and end in relation to the element’s position in the viewport.

For example:

animation-range: entry 0% cover 50%;

This means:
• Start when the top of the element enters the viewport (0%).
• End when 50% of the element is visible.

You can create very precise effects with other options like:
• entry 0% entry 100%
• cover 0% exit 100%
• entry 25% cover 75%

⸻

✅ Why Use This?

Here’s why animation-timeline: view(); is a game-changer:
• No JavaScript needed — smaller bundle size
• Cleaner markup — no JS scroll triggers or class toggles
• Better performance — handled natively by the browser
• Easier to maintain — CSS-only solutions are easier to reason about

Perfect for:
• Hero text animations
• Section reveals
• Parallax effects
• Scroll-driven storytelling

⸻

🧪 Browser Support

As of now, animation-timeline and view() are supported in Chrome (117+), Edge, and other Chromium-based browsers. Firefox and Safari are still in progress, so it’s best used with progressive enhancement in mind.

Check support here: Can I Use

⸻

🧠 Final Thoughts

Scroll animations are no longer a JavaScript-only domain. With just a few lines of CSS and animation-timeline: view();, you can bring dynamic, scroll-triggered animations to life in a cleaner, faster, and more maintainable way.

No libraries. No listeners. Just CSS.

⸻

Want to see it in action?

Check out this live demo:
🔗 CodePen: Scroll Animation Without JavaScript

Let your UI come alive — one scroll at a time. 💫