Mastering CSS Scrolling Animations Easily

By Jorge Saud · February 10, 2025

Introduction

Here we will talk about simplified version of the CSS Scrolling Animations, we will focus in 2 main ways of implementing this scroll animation only with css all both using the animation-timeline and “animation-range```

• here is the specification

This is a WIP draft, and is subject to change but in chrome is already working, as soon as it is finalized we will update this post

The problem

The problem is that we have to use a lot of javascript to make this work, and we are not using the native scroll animations, so we need to implement our own scroll animations.

The solution

We will use the animation-timeline:view() and animation-timeline:scroll() to make the scroll animations, and we will use the animation-range to define the duration not in time but in % of entrace and exit of the animation, or in % of the total scroll animation of parent element.

Based on animation-timeline:scroll()

this kind of animation is used based on the scroll position of the parent overflow container

<div class="animate-view-scroll">animate-view-scroll</div>

<style>
  body {
    scroll-timeline-name: --main-scroll;
  }
  .animate-view-scroll {
    height: 300px;
    width: 300px;
    background-color: red;
    animation-timeline: scroll();
    scroll-timeline: --main-scroll inline;
    animation-name: scale;
    transform: scale(0);
  }
  @keyframes scale {
    to {
      transform: scale(1);
    }
  }
</style>

Based on animation-timeline:view()

This kind of animation is based on the intro and observability of the node in the screen this text the implementation is simple we only need to add the animation-timeline:view() to the css of the div and set an animation-range to define the duration of the entrance and exit of the animation in this case we set the entrance to 10% of the screen and the end when cover the 40% of the screen after that we can add the @keyframe animation name to use this as the starting and end point of the animation getting the code here is an example:

<div
  class="animate-view h-[300px] w-[300px] bg-amber-950 z-10 text-yellow-300 grid place-items-center my-10"
>
  EXample Test
</div>
<style>
  .animate-view {
    animation-timeline: view();
    animation-range: entry 30% cover 60%;
    animation-name: reveal;
    animation-fill-mode: forwards;
    translate: 100px 100px;
    opacity: 0;
  }
  @keyframes reveal {
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
</style>

Even in some situations we can use animation-timeline: view(pxToTheTop,pxToTheBottom) with a parameter like pxToTheTop and pxToTheBottom to define the end and initial position of the animation even when it sounds not intuitive that is because I prefer use animation-range: entry 10% cover 60%; that refers to the element entry on the viewport or animation-range-start: 100px; animation-range-end: 500px; that is for a more granular control of the animation.

And to mantain the end animation on scroll we can use the animation-fill-mode: forwards;.