CSS scroll and view animation in just 6 lines of code

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!