CSS has improved for the last 10 years with constant updates and features. Google Chrome Devs published an exciting list of new CSS and UI coming to Google Chrome in 2023 and we see in Google Dev Chrome’s blog post on CSS Wrapped 2023. Part of the properties that were discussed are some cool technologies, but they are experimental.

Experimental technologies are those technologies that are currently being added to web browsers and may not be ready to be used fully across major browsers. However, we can still try out some of these new properties and get a sneak peek into how they work.

In this article, we’ll be focusing particularly on using a CSS experimental property - animation-timeline to make a scroll bar timeline and a bunch more cool animations you can do with this property!

CSS Experimental Technologies

I find it interesting that CSS explodes with features that make everyday development easier. From scroll snapping to view transitions and more. One thing I have learned is that as the year goes by, and more things come out, the more there is to learn and relearn.

I see cool stuff with CSS trigonometry functions, nesting, :has(), view transitions, and a bunch more. Today, we’ll be focusing on how we can use one of CSS’ experimental technologies - animation-timeline to make a scroll bar timeline.

It truly is just an exciting time to be into learning CSS and I’m super excited to see most, if not all, the experimental technologies being implemented across all major browsers.

How to Create a Scroll Bar Timeline with CSS

This has got to be one of the coolest things I stumbled upon recently. Instead of using traditional JavaScript to trace and monitor the horizontal scroll of your webpage, you can use:

    .element{
      ...
      animation-timeline: scroll();
      ...
    }

However, there are some conditions you must satisfy before implementing such. These include:

1. The CSS animation property must be declared before the animation-timeline property as it is required for scroll-driven animations.

2. For the scroll bar timeline to grow, either set the CSS width or scale property to grow the div’s width size from 0 to 100 when you scroll to the bottom.

1. Create animation property and set the timing function to linear

    .scroll-timeline{
      ...
      animation: scroll-timeline-animation linear;
      ...
    }

In this step, you’d need to add an animation to your scroll-timeline class, giving it any name of your choice and adding a linear timing function. Assigning any other timing function apart from linear will yield a weird result. Remember, this is still an experimental property so, some things will change later on.

2. Set the animation-timeline to scroll()

    .scroll-timeline{
      ...
      animation: scroll-timeline-animation linear;
      animation-timeline: scroll();
      ...
    }

The CSS scroll() function is used in CSS to provide a scroll progress timeline as the scrollbar (either on the vertical axis or horizontal axis) moves from one position to the other. In our case, we want the scroll progress timeline to move incrementally from 0 to 100 when the vertical scrollbar scrolls to the bottom of the page.

3. Define the width and height of the scroll progress timeline

There are two ways to go about defining the width of this: i. We use the scale property to increase the width from 0 to 100 ii. We wing it with width

Either of them works fine, but I’d prefer to use the width property because it’s a more straightforward CSS declaration:

    .scroll-timeline{
      ...
      animation: scroll-timeline-animation linear;
      animation-timeline: scroll();
      width: 0;
      height: 1.5rem;
      ...
    }

Setting the width to 0 allows us to grow the width from 0 to 100 based on the position of the vertical scrollbar.

4. Define @keyframes at-rule for scroll-timeline-animation

All we need to do in this step is set the width to 100% and we’re good to go:

    @keyframes scroll-timeline-animation{
      100%{
        width: 100%;
      }
    }

5. Style the scroll timeline as you see fit

You can add a linear-gradient if you’re feeling creative or a background image and position the scroll timeline anywhere you like. It really doesn’t matter, the most important stuffs have been highlighted.

I’d prefer to keep my styling simple for the scroll-timeline so I’ll position it to the top and add a grey background color. Here’s what the full code for the scroll timeline looks like:

    .scroll-timeline{
      position: fixed;
      top: 0;
      z-index: 10;
      height: 1.5rem;
      background-color: grey;
      width: 0;
      animation: scroll-timeline-animation linear;
      transform-origin: left;
      animation-timeline: scroll();
    }

Example 1: Scroll Bar Timeline

This is a common example where your page progress is displayed at the top of your webpage.

Notice how scrolling down causes the scroll bar timeline to extend till it reaches the end of the screen (right side).

Example 2: Name in a Box

Here’s another example of using the animation-timeline to make a cool effect on a webpage.

Now, a few things are happening here. First of all, I’m changing using animation-timeline to change the background of the body, my name from ‘Sunkanmi’ to my full name with a prefix - ‘Olasunkanmi’, and finally, just right at the end, I’m placing my changed name into a little rectangular box.

Notice how the rectangular box (let’s call it a present) closes and opens as we scroll up and down the webpage. The awesome thing is that it also works for images like we have in our next example!

Example 3: Zooming Out Image

The example below adds a scale-out animation to the collage image as you scroll down. Take a look at its effect!

I deliberately added some dummy text to make sure the vertical overflow scrollbar appears for us to scroll down and see how it scales out.

Example 4: Visual Storytelling

A good way to use the animation-timeline scroll function is to visually explain a story or slowly reveal a piece of content to your audience as they scroll down to read the texts. The example below slowly displays the SVG art on the canvas as you arrive at the top half of the screen to the bottom. SVG dashstrokes, CSS opacity, and various animations are used here to slowly bring it out and display it on the screen.

For the first SVG, I simply added animations for both path drawing and opacity since it’s a bit complex to just draw using stroke-dasharray so its only used on the HTML SVG path tags:

    .svg-edit{ 
      ...
      animation: change-opacity linear;
      animation-timeline: scroll(); 
      height: auto;
      ...
    }

    path{
      animation: path-change linear;
      animation-timeline: scroll();
      stroke-dashoffset: 40;
      stroke-dasharray: 40;
       ...
    }

    @keyframes path-change {
      50%{
        stroke-dashoffset: 20;
      }
      100%{
        stroke-dashoffset: 0;
      }
    }
    @keyframes change-opacity {
      0%{
        opacity: 0;
      }
      100%{
        opacity: 1;
      }
    }

The CSS stroke-dashoffset is used for setting where the path will start. The higher the value, the further it is from its starting location. If it’s 0, it’s at its originating point. When the animation starts as you scroll down, the offset value is slowly reducing from its set value 40 to 0, drawing the path lines that appear to be missing from the start. The opacity does the same thing just that it goes from 0 to 1 to show the SVG.

For the second SVG, I used Ana and Sergej’s SVG Artista to get the slick animations as you scroll down and I applied the animation-timeline: scroll() function to all elements in the SVG element i.e

    svg * {
      animation-timeline: scroll() !important; 
    }

For some reason, animation-timeline is not applied when !important is missing. I believe an animation is overriding it somewhere. But, that’s it! The full HTML, CSS, and JS code is wayyyyy too long to post here so I recommend you head over to my codepen project where it’s stored and view the full example of the scrolling animation from there.

That’s it!

I hope you enjoyed this article on Making a Scroll Bar Timeline with CSS and its cool examples with the CSS animation-timeline property, particularly its scroll() function. Let me know in the comments section what you think about this property and the coming new CSS properties as a whole!

References

• CSS Wrapped 2023

• MDN CSS scroll() function

• W3C Official Draft Spec on Scroll-driven Animations

• MDN animation-timeline