CSS scroll and view animation in just 6 lines of code

CSS is evolving

Jun 30 2025

2 min

Summary

This article demonstrates how CSS's new `animation-timeline` property simplifies scroll-triggered animations, improving performance over JavaScript solutions. Using `animation-timeline: scroll()`, a scroll progress bar is created with just a few lines of CSS, animating a `scaleX` transformation. Similarly, `animation-timeline: view()` is used to animate an element's appearance (`slideIn` animation) when it enters the viewport. The article highlights the performance benefits of using CSS for these animations compared to JavaScript.

Copy HTML

Copy Markdown

CSS is evolving, meaning fewer lines of code handle multiple events on the web

In just a few lines, we will add a scroll progress bar using scroll animation timeline, the new CSS property

animation-timelines:scroll()

Let's suppose we want to scroll progress on the top or on the bottom, or for the sake of another example, we want to animate an element when in view using the scrollbar.

Adding scroll animation needs some JavaScript if you are thinking that you are right, but you are not close to the best answer in terms of performance. Not everything in the DOM or a website needs to be handled using JavaScript; the reason is performance.

CSS provides a new property to track the element you want to trigger an event when in view and add scroll animation.

.footer::after {
	content: "";
	position: fixed;
	bottom: 0;
	left: -2px;
	width: 100%;
	height: 0.8em;
	background-color: rgb(0, 0, 0);
	transform-origin: left;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	animation: progress-width linear;
	animation-timeline: scroll();
	animation-range: 0 100%;
}

@keyframes progress-width {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

Now, let's break it down

First, we set the footer at the bottom. You can add it at the top as well
Then we add an animation timeline as a scroll
Lastly we provide keyframes for the animation

Just 3 lines of code

NOTE: If you put animation: progress-width linear above animation-timeline:scroll(), the animation will not work, think 😁

Moving ahead with another animation example, in this case, we will animate the element when in view. I was so eagerly waiting for CSS to have scroll-driven animation since JavaScript is quite an easy solution we have, but since JavaScript is not performant, I try to avoid it in the first place for simple animations.

Even if I want to add animation using states from backend API like payment loaders, indicators, skeleton and errors, I would possibly play around with classnames to juggle the CSS inside styles.css files.

animation-timelines:view()

By its name, one can understand, view means something when in view should trigger animation, and the next question is what animation, then the answer is keyframes, which is slideIn in our case

img {
  animation: slideIn;
  animation-timeline: view();
  animation-range: 0% 50%;
}

@keyframes slideIn {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

Quite easy ahh!!, I am not providing a preview, go check it on your own!

Please login to leave a comment

No comments yet. Be the first to comment!

Our once a week newsletter on Programming, Jobs, AI, and Business