Why bother? Scroll-driven animation durations are, well… scroll… driven. This trick severs that, so you can do stuff like “when this element comes into view, run this little animation over 600ms”, entirely in CSS.

• Jhey’s demo
• Ryan’s demo

The highlighted line is done with a <mark> element in HTML, which feels right. I noticed the class name on Lene’s implementation is .gsap-highlight which implies GSAP is used which has as a great Scroll Trigger plugin. Let’s do this without JavaScript though, especially now that I’m hip to Scroll-Driven Animations.

Basic HTML

A paragraph with a mark (with a class):

<p>Lorem, ipsum dolor sit amet <mark class="scroll-highlight">consectetur adipisicing elit</mark>. Magnam voluptas aliquid, distinctio voluptatum neque qui modi. In adipisci ratione id officiis nulla veritatis, porro explicabo illum laudantium iure eius velit!</p>

CSS Mark Styling in CSS

I just want a solid background on the mark. But I’m not going to use background-color. Instead I’m going to use background-image, because then I can control the background-size which I ultimately want to animate. So:

mark.scroll-highlight {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  background-image: linear-gradient(purple, purple);
}

Now I can animate that background-size from 0% 100% to 100% 100% which is the look we’re after. It even works when the text breaks across lines which is a miracle.

Now it’s a matter of when to run the animation.

Scroll-Driven Animation for the Mark

Here’s the whole trick:

mark.scroll-highlight {
  background-size: 0 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  background-image: linear-gradient(purple, purple);

  animation: mark-it linear;
  animation-fill-mode: forwards;
  animation-timeline: view();
  animation-iteration-count: 1;
  animation-range: contain 0% contain 25%;
}

@keyframes mark-it {
  0% {
    background-size: 0 100%;
  }
  100% {
    background-size: 100% 100%;
  }
}

The coolest part to me is the animation-range which gives us the opportunity to say when to start and end the animation with a solid amount of control. In the code above we’re saying to start the animation as soon as the element is fully within the viewport, then finish when it’s 25% of the way up the currently visible viewport.

Demo

Remember native support for Scroll-Driven Animations is essentially Chrome ‘n’ friends only right now. You could easily treat this as a progressive enhancement, wrapping the animation stuff in a @supports (animation-timeline: view()) { } block or however you wanna do it.

Demo video:

But I haven’t gotten a chance to play with it directly very much yet. So here I go!

This all got started because I got a nice email from a reader who had a very specific effect in mind they were trying to replicate on their own website. Somewhat inspired by Chung-Yun Yoo’s website, the idea is: images that zoom in (or out) as you scroll. They don’t change dimensions themselves, they just change how much of the image you can see in the space they already occupy. This doesn’t require too much trickery — you just set the width, height, and background-size and you can affect how much of an <img> you can see. Changing that background-size has the zooming affect.

This is what we’re after (video):

The trick is changing the background-size on scroll. This is normally something you’d use JavaScript for, like scroll event listeners on the document and/or IntersectionObserver stuff. But now, we can express what we want in Scroll-Driven Animations.

Bramus Van Damme has lots of good resources on Scroll-Driven Animations like this article and the site scroll-driven-animations.style. The tool I found most helpful when trying to figure this out was this View Progress Timeline tool. In this tool, you can see how a green box has an animation run only during the time when it’s visible at all in the viewport. I was very pleased to have that click for me, as before I saw this I thought that the timelines needed to be the entire scroll-length of the element. Good job, API!

Note the cover keyword there that is helping us achieve that effect. It’s definitely worth a play with the other values to see what they do. Honestly I can imagine they are all useful in certain situations. Seeing the generated code, I was able to see that our image effect is quite simple to scaffold:

.img {
  animation-range: cover 0% cover 100%;
  animation: the-animation linear;
  animation-timeline: view();
  animation-iteration-count: 1;
}

@keyframes the-animation {
  from {
    /* whatever */
  }
  to {
    /* whatever */
  }
}

In our case, we can flesh out the animation with just some background-size changes and we’re good! Here’s a basic demo you can scroll up and down:

As I write, scroll-driven animations are available in Chrome ‘n’ friends, flagged in Firefox, and not yet available in Safari. There is a polyfill, which that demo above loads, so it should work across all three.

Those are the basics that achieve what I had in mind. Now here’s a Pen that uses the same animation across multiple elements, but sets where the animate to via CSS Custom Property.

Funnnnn.