Scroll-driven animations
Have you ever had a scenario where you wanted to do a certain thing with elements as they scrolled into view? Like fade or transform them in? I have, plenty of times, and in the past that meant reaching for JavaScript and IntersectionObserver or scroll APIs. Now, as is the trend with the things we are looking at in this chapter, we can achieve this with better results and simpler code with CSS.
Remember, when dealing with animations, you can aid users who might not enjoy them by wrapping the effects in a suitable media query with @media not (prefers-reduced-motion: reduce).
Example time! Open example_15-08. This is a page full of rectangles that overflow the viewport (unless you are from the future with a 30,518 px high screen, in which case it won’t overflow – but how big is your desk?). Scroll the page and marvel at the beauty of those rectangles appearing in the viewport. If you can’t see the example right now, know...
