Scroll Animation 1

There are two main types of timeline:

1. scroll progress timeline - relates to the length of the page. The timeline starts with 0% at the top of the page and 100% when scrolled down to the bottom.
   animation-timeline: scroll()
2. view progress timeline - relates to the position in the viewport. An animation’s 0% postition may start as an element comes into the bottom of the viewport and reach 100% when it reaches the top. However the exact positions are malleable.
   animation-timeline: view()

By default the animation responds to the scrolling of it’s closet scrolling ancestor. That is scrolling not scrollable. Alternatively you can declare your scrolling element in the brackets: animation-timeline: scroll(root).

scroll() arguments

This can take 7 possible arguments. 3 relate to the element that is being scrolled and 4 are the direction.

The element arguments are: root, nearest (the default), and self. If the scrolling element is the current block then it’s not an ancestor so nearest won’t work on it.

Notes on overflow

The direction arguments are inline or x for horizontal scrolling or block or y for vertical (which are the defaults).

.square {
    position: sticky;
    width: 100px;
    height: 100px;
    background-color: fuchsia;
 
    animation: change-colour  forwards;
    animation-timeline: scroll();  /* MUST come after the */
}                                  /* animation property  */


@keyframes change-colour {
    to {
        background-color: #0f53ff;
    }
}

In this animation it starts at the top of the page, 0%, and ends at the bottom or 100%. The start and end can be changed though with the following:

.square {
    animation-range-start: 10%;
    animation-range-end: 80%;
}

Horizontal scrolling

By default the scrolling is on the vertical or block axis. This can be changed to the horizontal or inline axis. Use either the keywords block or inline or y and x:

.square {
    animation-timeline: scroll(x); /* horiztontal */
    animation-timeline: scroll(inline); /* horiztontal */
}

Anonymous vs named timelines

Above we are using anonymous timelines. That is they don’t have a name.

With only 3 key words for choosing your scrolling element, root, nearest and self sometimes you may wish to choose a different element. This is where named timelines come in.

.el {
    scroll-timeline-name: --someName;
    animation-timeline: --someName;
}

In the above example these are on the same element so it’s the equivalent of using scroll(self). But you can put it on any element you like.

The general scroll-timeline takes two values, the name of the timeline and the axis to which it applies: block or y (the default) and inline or x for horizontal scrolling.

.el {
    scroll-timeline: --someName inline;
}