CSS Masks and Scroll Animations with Motion for React
In this video we'll be combining CSS Masks and Framer Motion's scroll animation, to create unique animations.
... Almost ready!
Creating the page from scratch
This video is part of Frontend.FYI PRO. A one-time purchase of €249 gives you access to all of our pro courses and paid tutorials. Including future releases.
Making it responsive
This video is part of Frontend.FYI PRO. A one-time purchase of €249 gives you access to all of our pro courses and paid tutorials. Including future releases.
Using springs to smoothen the animation
This video is part of Frontend.FYI PRO. A one-time purchase of €249 gives you access to all of our pro courses and paid tutorials. Including future releases.
In this video we’ll be exploring how we can use CSS Masks to peek through a div, and see what lies behind it. We’re gonna use this technique and combine that with Framer Motion to create a scroll animation that zooms through an airplane window while you scroll down.
For the scrolling animation we’ll be using the useScroll hook of Framer Motion, which gives us the ability to tap into the scroll position of an element on the page.
This scroll position we then convert into a zoom for the “airplane window”. Fasten your seatbelts, and let’s dive in!