Re-imagine the web with Scroll-Driven Animations

To address some of the remarks I see popping up in the comments:

“Two emptys divs. Hahahaha.”

You really only need two elements in your markup here: a scroller + an element that you animate. They can even be one-and-the-same element … or you could use three if you want to track an element in a scroller while animating another element at the far end of your DOM tree. Whatever floats your boat.

“But you need JavaScript to achieve the effects shown”

Yes, while you can get most animations going with CSS or WAAPI alone, sometimes you need to sprinkle a bit of JS on top of your CSS to achieve Scroll-Driven Video or Scroll-Driven 3D objects.

“Scroll animations are the worst UX!”

Developers have been building these effects for quite some time, so functionally there is nothing new here. If you don’t like them you should set your prefers-reduced-motion preference to reduce by changing your OS User Preferences. Websites that were built properly will give you no or alternative animations when that is the case.