Scroll driven animations with entry and exit states

Week 421 was posted by Charanjit Chana on 2025-11-21.

Following on from last week's look at colour spaces, another CSS topic I've wanted to dive into is scroll driven animations.

I had already applied them to the app pages for when the device preview appears on scroll, like on the Team Sheets marketing page I have.

An interaction I see often is an element growing on entry and shrinking on exit. It wasn't obvious to me how you achieve this, but I managed to cobble a demo together:

The important bit for me turned out to be the keyframe definitions. I thought there might be a way to specify entry and exit values to the animation-range but I found that the keyframe edits were just fine.

You can see the code in the demo above, but I'll put the code here too. It's makes sure the browser supports the functionality so you should consider fallbacks where it makes sense to have one:

@supports (animation-timeline: scroll()) {

    #contentBox {
        animation: marginFlexer ease-in-out both;
        animation-timeline: scroll();
    } 
    
    @keyframes marginFlexer {
        0% {
            margin-inline: 10vw;
        }
        50%, 80% {
            margin-inline: 5vw;
        }
        100% {
            margin-inline: 10vw;
        }
    }

}

Tags: