Lesson 7/8

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!