So many ranges, so little time: A cheatsheet of animation-ranges for your next scroll-driven animation
If you’re new to scroll-driven animations, welcome! To start, it might be a good idea to read this beginner-friendly introduction before diving into this guide. I touch on animation-ranges briefly in that article and here I’ll go deeper, covering the different values and what they mean. Let’s begin!
animation-range is used along with the view() timeline. That’s the timeline you would select if you wanted the animation to happen when the user is scrolling and your element is visible in the viewport.
But saying that my element is “visible in the viewport” can mean a lot of things. Here are the different ways in can be interpreted.
Does “visible in the viewport” mean you want to start the animation as soon as the first pixel comes into view? Or do you want to wait until the whole photo is visible? What if you want to start the animation when the photo is halfway through the page? Or if you want to stop the animation when it’s almost off the page, but not quite? So many options!
animation-range gives you the ability to be that specific, allowing you to be very particular in when exactly you start and stop your animation.
