🎢 Scroll-Linked Animations in CSS Are Here — And They’re Kinda Awesome

Ever wanted to animate something on scroll without reaching for JavaScript? Well, good news: modern CSS has a new trick up its sleeve called animation-timeline: scroll() — and it’s surprisingly powerful.

Let me show you what it is, how it works, and why you might want to use it in your next project.

⸻

🌀 What Is animation-timeline: scroll()?

Traditionally, CSS animations run on a timeline based on time (seconds, milliseconds, etc.). But with this new feature, the animation is synced to the scroll position of an element. That means: the more you scroll, the further along the animation progresses — and when you stop scrolling, the animation pauses too.

No JavaScript. No ScrollTrigger. Just clean CSS.

⸻

✏️ A Simple Example

Here’s a quick setup I made:

<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

#container {
  height: 300px;
  overflow-y: scroll;
  position: relative;
}

#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  animation-name: rotateAnimation;
  animation-duration: 1ms; /* Needed for Firefox */
  animation-timeline: scroll();
  position: absolute;
  bottom: 0;
}

#stretcher {
  height: 600px;
  background: #dedede;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

What this does: as you scroll the container, the pink square smoothly rotates from 0 to 360 degrees. The scroll itself controls the rotation.

You can try it live here:
👉 Check out the demo on CodePen

⸻

🧠 How It Works

The key line here is:

animation-timeline: scroll();

This tells the browser, “Hey, link this animation’s progress to the scroll position of the closest scrollable parent.”

The animation doesn’t care about time anymore — it only moves forward as you scroll down. It also works in reverse if you scroll back up. Super intuitive.

One gotcha: the animation-duration: 1ms line might look weird, but it’s currently needed for Firefox to kick in the animation. Hopefully that gets patched in the future.

⸻

✅ Why This Is Cool

This is perfect for:
• Scroll-driven effects (e.g. rotating, scaling, fading)
• Data storytelling where animations unfold as you scroll
• Creative transitions without JavaScript
• Lightweight performance improvements over JS-based scroll listeners

Plus, it’s way easier to read and maintain than JavaScript-based scroll logic.

⸻

⚠️ A Few Things to Know
• Browser support: It’s already working in Chrome and Edge. Firefox supports it behind a flag. Safari is… getting there.
• No fallback? Yep. If you need support for all users, you’ll still need a JS fallback for now.
• Only works on scrollable containers, so make sure your parent has overflow: scroll or auto.

⸻

🧪 Want to Try It?

Here’s the live demo again:
👉 https://codepen.io/MD-Hasan-Patwary/pen/oggopVy

Give it a scroll, watch the rotation in action, and start imagining what else you can do.

⸻

🧵 Final Thoughts

Honestly, this is one of the most exciting CSS features I’ve used recently. It opens up a whole new way of designing scroll-based interactions without the overhead of JavaScript.

As support improves, we’re going to see some really slick web experiences using scroll-driven motion. So go ahead — start experimenting. Your future self will thank you.

Got any cool ideas or scroll effects you’re proud of? I’d love to see what you build. 🚀

⸻

Happy scrolling! 🖱️✨