An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines

You can safely use scroll-driven animations in Chrome as of December 2024. Firefox supports them, too, though you’ll need to enable a flag. Safari? Not yet, but don’t worry — you can still offer a seamless experience across all browsers with a polyfill. Just keep in mind that adding a polyfill involves a JavaScript library, so you won’t get the same performance boost.
There are plenty of valuable resources to dive into scroll-driven animations, which I’ll be linking