Progressively Highlight Text On Scroll Using CSS animation-timeline Property

A scroll-driven text highlighting effect that allows you to progressively highlight specific text wrapped in <mark> elements as users scroll down the page.

It’s powered by the animation-timeline CSS property, which provides precise control over the animation’s progress.

How to use it:

1. Wrap the text we want to highlight in a <mark> element.

<mark>Text To Highlight On Scroll</mark>

2. Then, we use the @keyframes rule to define the animation, which simply changes the background position of the <mark> element.

@keyframes highlight {
  to {
    background-position: 0;
  }
}

3. The animation-timeline property is set to view(60% 20%), which means the animation will start when the element is 60% of the way down the viewport and end when it’s 80% of the way down.

mark {
  animation: highlight linear forwards;
  animation-timeline: view(60% 20%);
  background: linear-gradient(
    to right,
    oklch(0.86 0.19 84.89 / 1) 50%,
    oklch(0.86 0.19 84.89 / 0) 50%
  );
  background-position: 100%;
  background-size: 200% 100%;
  border-radius: 0.125rem;
  padding-inline: 0.125rem;
}