Section 2: Scroll-Driven Animations (Css Only)
Our website looks professional. It’s fast, it’s accessible, and it works on every device. But right now, it’s completely static — every section just sits there waiting. Modern business websites use motion to guide attention, reward scrolling, and signal quality. In this section, we’ll add scroll-driven animations entirely in CSS. No JavaScript. No libraries. Just two modern CSS properties: scroll-timeline and view-timeline. They are designed specifically for this.
WHAT ARE SCROLL-DRIVEN ANIMATIONS?
Normally, CSS animations play the moment a page loads — whether the user sees the element or not. Scroll-driven animations change that. They tie an animation’s progress directly to the scroll position. The animation only plays when the element enters the viewport. The moment it comes into view, it comes to life.
There are two tools for this. The first is the view-timeline. This tool tracks when an individual element enters and exits the viewport. The second is the scroll-timeline, which tracks the overall scroll progress of the entire page. We’ll use both in our project.
Before we build, a quick note on browser support. Scroll-driven animations are supported in Chrome 115+, Edge 115+, and Firefox 110+. Safari added support in version 18, released in 2024. For any browser that doesn’t support them yet, the fallback is simply the default state. The page elements appear normally without animation. The content is always visible. The animation is progressive enhancement, never a requirement.
Reading Progress Bar
We’ll start with the reading progress bar, a thin strip at the top of the page that fills as the user scrolls. It’s subtle, but it’s one of those details that makes a website feel polished and considered. And the entire effect is four lines of CSS.
Open styles.css and paste this code right after the base reset, before the CSS variables.
css
/* ================================
Reading Progress Bar
================================ */
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--primary-color);
transform-origin: left;
transform: scaleX(0);
z-index: 1000;
animation: grow-progress linear;
animation-timeline: scroll(root block);
}
The key line is animation-timeline: scroll(root block). This tells the browser to drive the animation not by time, but by the scroll position of the root element, that is, the page itself, along the block axis, which means top to bottom. As the user scrolls from top to bottom, the animation progresses from 0% to 100%.
Now open index.html and add one line right after the opening <body> tag.
html
<body>
<div class="progress-bar" aria-hidden="true"></div>
<!-- rest of your page -->
Add the same line to the other three pages as well. The aria-hidden=”true” attribute hides it from screen readers — it’s a visual decoration, not meaningful content.
Save and reload. Now scroll. That one CSS property, animation-timeline, does something that used to require 20 lines of JavaScript. That’s the power of the modern CSS platform.
