{"id":20321,"date":"2025-10-22T12:15:15","date_gmt":"2025-10-22T06:45:15","guid":{"rendered":"https:\/\/vinish.dev\/?p=20321"},"modified":"2025-10-22T12:15:16","modified_gmt":"2025-10-22T06:45:16","slug":"css-scroll-linked-animation","status":"publish","type":"post","link":"https:\/\/vinish.dev\/css-scroll-linked-animation","title":{"rendered":"Building Scroll-Linked Animations in CSS"},"content":{"rendered":"\n

Have you ever visited a website where elements smoothly fade in, slide across, or scale up as you scroll down the page? These scroll-linked animations used to require JavaScript libraries, but now you can create them with pure CSS using the @scroll-timeline<\/code> rule and animation-timeline<\/code> property.<\/p>\n\n\n\n

In this tutorial, I will show you how to create scroll-linked animations in CSS.<\/p>\n\n\n\n

What Are CSS Scroll-Linked Animations?<\/h2>\n\n\n\n

Scroll-linked animations in CSS are visual effects that trigger based on your scrolling position. Instead of playing automatically when the page loads, these animations respond to how far you've scrolled. Think of elements that appear gradually as they enter your viewport or images that zoom in as you scroll past them.<\/p>\n\n\n\n

In my experience, these animations make websites feel more dynamic and engaging without overwhelming your visitors. The best part? With modern CSS, you don't need any JavaScript to make them work.<\/p>\n\n\n\n

Understanding the Scroll-Linked Animation Basics<\/h2>\n\n\n\n

Before we dive into scroll animations, you need to understand how regular CSS animations work. An animation has keyframes that define what changes happen, like moving from invisible to visible or from small to large.<\/p>\n\n\n\n

Here's where scroll-linked animations differ: instead of running based on time (like \"complete this animation in 2 seconds\"), they run based on scroll position. When you scroll down 50% of the page, the animation is 50% complete.<\/p>\n\n\n\n

The Core CSS Properties for Scroll-Linked Animation<\/h2>\n\n\n\n

You'll work with two main CSS features:<\/p>\n\n\n\n

@scroll-timeline<\/strong>: This creates a timeline based on scrolling. You define which scrollable container to track and in which direction (vertical or horizontal).<\/p>\n\n\n\n

animation-timeline<\/strong>: This property connects your animation to the scroll timeline instead of running on a time-based timeline.<\/p>\n\n\n\n

How to Use @scroll-timeline<\/h2>\n\n\n\n

In CSS, the @scroll-timeline<\/code> rule lets you create a named scroll timeline that you can reference later. Here's the basic syntax:<\/p>\n\n\n\n

@scroll-timeline my-scroller {
    source: auto;
    orientation: block;
    scroll-offsets: 0%, 100%;
}<\/pre>\n\n\n\n
In this code, my-scroller<\/code> is the name you give to your timeline. The source: auto<\/code> means it will track the nearest scrollable ancestor, and orientation: block<\/code> specifies vertical scrolling (use inline<\/code> for horizontal).<\/p>\n\n\n\n
Then you connect this timeline to an animation:<\/p>\n\n\n\n
.animated-element {
    animation: fadeIn linear;
    animation-timeline: my-scroller;
}<\/pre>\n\n\n\n
This approach gives you more control, especially when you want multiple elements to animate based on a specific container's scroll position.<\/p>\n\n\n\n
Using animation-timeline with Built-in Functions<\/h2>\n\n\n\n
Instead of manually creating a @scroll-timeline<\/code>, you can use built-in functions directly with animation-timeline<\/code>. This is much simpler and what I use most often:<\/p>\n\n\n\n
.element {
    animation: slideIn linear;
    animation-timeline: scroll();
}<\/pre>\n\n\n\n
The scroll()<\/code> function creates an automatic timeline based on the nearest scrollable ancestor. You can also use:<\/p>\n\n\n\n
.element {
    animation: fadeIn linear;
    animation-timeline: view();
}<\/pre>\n\n\n\n
The view()<\/code> function is different. It creates a timeline based on when the element enters and exits the viewport. This means the animation starts when the element becomes visible and completes when it's fully in view.<\/p>\n\n\n\n
Let me show you these in action with practical examples.<\/p>\n\n\n\n
Example 1: Scroll-Linked Progress Bar Using Named Scroll Timeline in CSS<\/h2>\n\n\n\n
Let's start with a pure named scroll timeline example where we create a progress bar that grows as you scroll through content:<\/p>\n\n\n\n
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #0f172a;
            font-family: system-ui, sans-serif;
        }
        
        h1 {
            color: white;
            text-align: center;
            margin-bottom: 10px;
        }
        
        .instruction {
            color: #94a3b8;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .scroll-container {
            width: 90%;
            max-width: 600px;
            height: 400px;
            margin: 40px auto;
            overflow-y: scroll;
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            scroll-timeline-name: --container-timeline;
            scroll-timeline-axis: block;
            position: relative;
        }
        
        .progress-bar {
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);
            transform-origin: left;
            border-radius: 3px;
            margin-bottom: 20px;
            animation: growBar linear;
            animation-timeline: --container-timeline;
            z-index: 10;
        }
        
        @keyframes growBar {
            from {
                transform: scaleX(0);
            }
            to {
                transform: scaleX(1);
            }
        }
        
        .content {
            line-height: 1.8;
            color: #475569;
        }
        
        .content h2 {
            color: #1e293b;
            margin-top: 0;
        }
        
        .content p {
            margin-bottom: 16px;
        }
    <\/style>
<\/head>
<body>
    <h1>Named Scroll Timeline Demo<\/h1>
    <p class=\"instruction\">Scroll inside the white box and watch the progress bar<\/p>
    <div class=\"scroll-container\">
        <div class=\"progress-bar\"><\/div>
        <div class=\"content\">
            <h2>Scroll Progress Indicator<\/h2>
            <p>As you scroll through this container, the colorful bar above grows from left to right. This demonstrates using a named scroll timeline with scroll-timeline-name property.<\/p>
            <p>The timeline is tied specifically to this scrollable container, not the entire page. This gives you precise control over which scroll area triggers your animations.<\/p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.<\/p>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.<\/p>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.<\/p>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<\/p>
            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt.<\/p>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.<\/p>
            <p>When you reach the end of this content, the progress bar will be completely filled, showing you've scrolled through the entire container!<\/p>
        <\/div>
    <\/div>
<\/body>
<\/html><\/pre>\n\n\n\n
Live Preview:<\/h3>\n\n\n\n
\n  See the Pen \n  sl-anim-1<\/a> by Vinish Kapoor (@foxinfotech<\/a>)\n  on CodePen<\/a>.<\/span>\n<\/p>\n