CSS Masks and Scroll Animations with Framer Motion

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!