There is always a challenge in creating scroll-based animation. First thought comes into mind is which library whould be better for adding animation on scroll? GSAP? Framer Motion? AOS? ScrollMagic?
Why not CSS? Yes, we can create scroll-based animation using CSS with just few lines on code. Let’s see how can we achieve it. This is just a starter / demo blog, here is whole documentation for it - here [ it is still in EXPERIMENTAL stage ]
Scroll-based Animation with CSS only
Learn how to work with Scroll Timelines and View Timelines to create scroll-driven animations in a declarative way. We will be creating few examples to get out hands dirty.
Scroll-driven animations are a widely used UX pattern on the web, where the animation's progress is directly linked to the scroll position of a container. As users scroll up or down, the animation smoothly advances or reverses in sync with the movement.
Progress indicators tracking scroll
The classic way to achieve these kinds of effects is to respond to scroll events on the main thread, which leads to two main problems:
- Modern browsers perform scrolling on a separate process and therefore deliver scroll events asynchronously.
- Main thread animations are subject to jank.
This makes creating performant scroll-driven animations that are in-sync with scrolling impossible or very difficult.
- Create a progress which is fixed at the top of screen
.progress {
position: fixed;
top: 0;
z-index: 1000;
left: 0;
height: 8px;
width: 100%;
background-color: var(--clr-primary-600);
}
Simple, we will see a progress-bar at top with full width.
- How to animate from left to right. We will scale the div to achieve it.
.progress {
position: fixed;
top: 0;
z-index: 1000;
left: 0;
height: 8px;
width: 100%;
background-color: var(--clr-primary-600);
scale: 0 1;
transform-origin: left;
/* animation */
animation: progress_bar linear;
animation-timeline: scroll();
}
@keyframes progress_bar {
to {
scale: 1 1;
}
}
animation-timeline : scroll()
The animation-timeline CSS property specifies the timeline that is used to control the progress of a CSS animation. Read more..