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.
Hi Bramus,
I’m playing with scroll-driven and view(), which seems more practical than scroll() for most of the case I use… but.. it’s me or the polyfill is still working with less features than the css API?
It there any gist/fork with newer functions?
In this example, using the flackr polyfill, https://codepen.io/DedaloD/pen/azojOrV
the flower and the phone picture are not animating at all, while testing on mobile.
Any hint to the right way, if I am missing something, please?
2nd question: using sticky elements like here: https://codepen.io/DedaloD/pen/gbYdPgw
which is the right solution to apply the animation on el:1 and el:2 ?
Thanks 🙂