Animate on Scroll with Intersection Observer
Now is the best time to be a Web Developer. We have access to plenty of APIs, which helps us in building outstanding web applications. With these new technologies, we can quickly do tasks such as DOM traversing, animations or even watching for changes in the document. Lately, new useful API appeared the Intersection Observer API.
What is Intersection Observer?
Element’s presence detection has always been a difficult task to do. Mostly, you needed to read the element’s bounding rectangle every time the scroll event was called. It is harrowing regarding rendering performance, but it was the only way to make animations launched on scroll position.
The Intersection Observer is an API, which helps determine if a specific element is visible in a viewport…, and this is it. Simple as that. So you don’t need to write complex scripts to read element’s appearance in the viewport, anymore. The browser does it for you.
If you ever had a chance to work on the website full of animations triggered on a scroll, it’s a perfect use case for Intersection Observer. Besides that, you can use it for:
- Image lazy loading
- Infinite scroll
- Launching actions based on viewport visibility
Using Intersection Observer is pretty straightforward:
I would recommend you to take a look at the docs, to get a better understanding of what possibilities gives us this API. Most of the modern browsers support Intersection Observer. Sadly, both mobile and desktop Safari browsers don’t support it yet. Still, you can use polyfill to get Intersection Observer working or use an old-fashioned way to check element’s presence in the viewport.
How to animate with Intersection Observer?
Animating elements on a scroll with Intersection Observer is super easy. With an element’s appearance detection done, the last thing to do is to add animations. The easiest way to do it is to animate an element with pure CSS. Let’s slightly modify previous example:
Then let’s add some CSS to animate the element:
As you can see, the element with item class is hidden at the beginning. When Intersection Observer detects that the item is in the viewport, function animate() will add a proper class, and thus the element nicely fades in.
Here’s a simple recipe how to animate elements on your website, but I know this could be not enough. Hence, I made a small library for animating elements on a scroll. Let me introduce you to Sal.
Meet sal.js
Sal.js it’s a library for animating elements with performance in mind. Thanks to the Intersection Observer API it’s super light (less than 2.5kb gzipped) and more performant than bounding detection based libraries. What’s more, it’s API is easy to use, no advance JavaScript knowledge needed. All you need to do is to add a proper HTML attribute and initialize library in your script.
See an example below:
What’s more, sal.js gives you the ability to control duration, delay and even timing function of your animation. Also, it supports several animation types, such as fade, slide, zoom, and flip. All this packed in user-friendly API based on HTML data-* attributes. I strongly suggest you take a look at the documentation and see yourself how simple is to animate elements using sal.
Further reading
Intersection Observer is a great technology, which makes our job easier, moving the responsibility of detecting elements presence to the browser. If you seek more information about Intersection Observer itself and libraries which use it, take a look at the list below:
Articles
- Intersection Observer API docs on MDN
- IntersectionObserver’s Coming into View by Surma
- The Intersection Observer API explained by Paweł Grzybek
- Using the Intersection Observer API to Trigger Animations and Transitions by Alligator.io
