With this CSS code, there’s no need for JavaScript to create scroll-driven animations. Scroll-driven animations can be controlled directly in CSS, eliminating the need for extra JavaScript code, enhancing performance, and simplifying the code structure.

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .scroll-animated {
      animation: colorShift linear both;
      animation-timeline: scroll();
    }
  }
}

The rest is up to your imagination. :)

Browser compatibility

https://caniuse.com/mdn-css_properties_animation-timeline_scroll