For some years now, a series of techniques have been quite popular with a common point: the introduction of animations or interactions linked to the user's progress through the page (scroll) that often allow us to "tell" a story (scrollytelling).

In its simplest form, this technique can be used to make certain elements "appear" when they reach a fixed point on the screen, thus giving a sense of greater dynamism and catching the user's attention. It is a technique that we can see in hundreds of sites such as, for example, the website of Opigno or this Netlify minisite.

In this tutorial we are going to tell you step by step how we recently added micro-animations to Metadrop.net and how you can do it on your own sites using our new contrib module and the Scrollama.js library.

Why Scrollama.js

Until a few years ago, scroll libraries had to listen to scroll events or even replace the native scroll with a simulated one (scrolljacking), which caused major performance problems, especially on mobile (jumpy scroll, interrupted scroll, etc.).

Fortunately, today we have the IntersectionObserver API that allows us to operate in…