CSS Scroll Animations

As per my previous post, CSS really is awesome. So many new features available and so many that are part of Baseline really making it easy to both start using them, and using them widely.

Something I just added to this site which is not fully baseline compliant yet, is CSS scroll driven animations. The set up is very well considered.

Define your animation

You do this just how you would any other animation in CSS.

@keyframes growWide {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

Apply your animation

Again, pretty straight forward. Be sure to set your duration to auto and the timing-fuction to linear as well

.progress-bar {
    animation: growWide auto linear;
}

Set your timeline

There are a few reserved values you can choose from such as scroll and view

.progress-bar {
    animation: growWide auto linear
    animation-timeline: view(y);
}

You can even specify your own scroll container if you prefer by adding the scroll-timeline to your containing block.

body {
    scroll-timeline: --page-scroll block;
}

So glad we won't need kilobytes of javascript for this presentational stuff in the future.