Frontend.FYI

June 18th

Time to learn about scroll animations!

Hey there!

Scroll animations can be so satisfying to look at. With the latest Framer Motion course module, that's exactly what we're going to learn. Let me show you what we'll be building together.

Can't wait? Start learning right away! Go to the course

Module 6: Scroll Animations

Scroll animations (when done properly!) can make webpages a much more memorable experience. In the latest module of the course we dive into how to create different types of animations, as well as how to not overdo them.

Scroll-triggered animations

The module starts off with diving into scroll-triggered animations. Animations that are triggered when you reach a certain position on the page, and then the animation triggers, no matter if you keep on scrolling or not. Perfect to create beautiful fade-in animations!

Scroll-triggered JavaScript logic

Next we continue exploring scroll-triggered animations even further by introducing the useInView() hook. This hook enables us to run any custom logic when an element comes into view.

In the lesson's exercise we will be using this to trigger a camera shutter sound when the picture comes in to view. Perfect to a bit of fun to your travel blog.

Scroll-driven animations

Make animations that progress as the user scrolls. We start with a scroll progress bar...

...then compare both scroll techniques by animating a bento grid!

Sticky scroll animations

In the final lesson we combine CSS Position sticky with scroll-driven animations for even more immersive effects. We practice this by rebuilding the animation below.

Did you see my latest Framer Motion Youtube Video?

Check out my latest YouTube video where we create a foldable map component with Framer Motion's drag API. It's super fun!

Watch on YouTube

​

Enjoy the new lessons! I’m here for any feedback or questions.

Jeroen.
​

Hi, I'm Jeroen After over a decade of writing frontend code and teaching my colleagues, I decided it was time to teach a wider audience the craft in frontend engineering. Which is when I started Frontend.FYI.