An approach to deal with revealing animations

Recently, we started adding revealing animations in some pages we are building. This was extremely influenced and introduced by Erick, one of our front end developers, who is a motion specialist.

The idea of this post is not to talk about animations concepts and things related to it but actually to show a first pattern version we are using to handle these animations.

The concept

The main idea here is to have a selector that identifies the sections that should be animated and start to watch them. Every page scroll we need to check:

• what is the current section;
• and if this section fills the rule(s) to animate it. If so, we add a class is-active that handles the animations.

IQ Loans homepage

IQ auto insurance homepage

The code

We are using IntersectionObserver to watch the sections we want to animate (more info about IntersectionObserver).

Let's look at it step by step:

First, we create some helpers methods that will help us.

• getAnimatedSections → It gets all the elements with the data-show attribute and runs a callback (that we receive as a parameter) for each element.
• line 3→ It checks if a section(which we receive as a parameter) is inactive, in other words, if the section has not the is-active CSS class.
• line 7 → It actives a section (which we receive as a parameter) adding a CSS class to it.

Then we create a function to bind to all the sections.

In the bindAnimatedSections function, we receive the observer as a parameter, and we then we call the function to return all the sections we want, using the getAnimatedSectionand the callback now is a verification using our isSectionInactive function. If the condition is true, that is, the current section is inactive, then we start to observe it.

The next step is to connect the dots and start the IntersectionObserver.

• line 3 → it checks if there isIntersectionObserver available and if it's not, then it activates all the sections.
• intersectionConfig → object configuration for IntersectionObserver.
• limitFromBottom → basically here, we're doing a simple calculation and getting a value that we'll use to verify if we need to activate a section or not.
• onIntersection → this is the callback for IntersectionObserver function. It receives the entries/sections and the observer as parameters. Inside the function: we check if still there is a section to watch if not, it disconnects the observer; then we loop through the remaining entries/sections and if our condition is true, we stop to watch this section and activates it.
• line 30 → we start the IntersectionObserver using our function bindAnimatedSections .

Finally:

To use it, you only need to import it and call the function.

import animationObserver from 'utils/animationObserver';
animationObserver()