Trigger animations on scroll

Small animations that happen on scroll, can really bring a page to life. They can be used to draw attention to certain elements, or simply turn the page into a more engaging experience.

But don’t forget – they are also very easy to overdo. Resulting in a bad user experience, and users who can’t find what they are looking for.

In this module we will explore the different types of scroll animations, how to implement them, and how to not overdo them.

Scroll-triggered animations

We will start the module by taking a look at scroll-triggered animations. Animations that happen when an element comes into view, rather than animations that keep updating while the user scrolls.

This way we’re able to make beautiful reveal animations…

.. and even play sound effects when an element comes into view.

That beautiful cabin on that idyllic lake..

Last summer, I escaped to a remote cabin nestled along the serene shores of a hidden fjord. Each morning, I woke up to the soft glow of dawn, painting the sky in pastel hues of pink and orange, interior and rustic charm, was the perfect retreat from the hustle reflecting off the tranquil water. The red cabin, with its cozy and bustle of everyday life.

Surrounded by towering mountains and the gentle sound of lapping waves, I spent my days exploring the rugged landscape and evenings curled up with a good book by the fire. It was a slice of paradise, a place where time seemed to stand still, allowing me to savor each peaceful moment.

Don't hear any sound? Make sure to click somewhere on the page first — this is a browser restriction to prevent spamming sounds on a website.

Scroll-driven animations

Next we’ll continue with scroll-driven animations. These animations keep updating while the user scrolls. The first thing we create with this is something you might have seen on lots of websites: a scroll-progress indicator.

Click that button 👀

After that we continue to explore how we can animate a bento grid when its cards come into view. We will make this animation both with scroll-triggered and scroll-driven animations, so you can see the differences between them.

TryPhone 29

Call me maybe

BearShots Pro

Ever heard better?

Trample Watch

Right on time

Position sticky

Lastly we will take a look at the position: sticky CSS property. Using this property in combination with scroll animations can create some truly magical effects. We will explore how to use it by recreating the animation shown in the video below.

Let’s start making some scrollie scrollie.