Practicing the differences between scroll-driven and scroll-triggered animations
Both useInView
and useScroll
can be used to create animations that occur when the user scrolls the page. In this lesson I want to take some time to make a similar animation using both hooks, so you can see the differences between them.
Animating a Bento Grid
We are going to animate a grid of images that will appear when the user scrolls the page. When it appears the cards will fade in, as well as have a slight 3D rotation effect — like you can see in the grid below.
Need more room to scroll? 👇
Unlock the full lesson with PRO
Want to read the full lesson? Join Frontend.FYI PRO.
PRO is a one time purchase of €149 that gives you lifetime access to this course, any courses released in the future, and so much more!