Here’s a video we – Chrome – launched as part of our EOY campaign, highlighting Scroll-Driven Animations.
Create fluid, responsive scroll-driven animations that give your users engaging, app-like web experiences—with only a few lines of CSS, JavaScript, or both.
I really like how Scroll-Driven Animations – a feature I have been working on as part of my job as Chrome DevRel – is getting its moment in the spotlight. I think the video turned out great, showing what can be achieved with Scroll-Driven Animations.
To learn how to create these engaging animations yourself, there’s only 1 place to be: https://scroll-driven-animations.style/
~
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-motionpreference toreduceby changing your OS User Preferences. Websites that were built properly will give you no or alternative animations when that is the case.