Javascript Animations For The Web

According to some recent studies, Javascript is considered to be the second most popular programming language in the world. So, what is Javascript and why is it so popular?

JavaScript runs on the client side of the web, which can be used to describe how the web pages behave on the occurrence of an event. JavaScript is an easy to learn and also powerful scripting language, widely used for controlling web page behavior.

There are many amazing things that can be built with Javascript, one of which are animations. Web page animations can be done in plain CSS as well, but for more complex animations ,such as animations on scroll, there are plenty of options to use when it comes to Javascript.

Libraries

Much like CSS frameworks, such as Bootstrap or Tailwind, there are plenty of Javascript libraries out there which come with ready made functions and CSS classes which can be easily implemented in any project. Some of them are anime.js, velocity.js, three.js, GSAP, Vivus.js and many more.

Custom Animations

For more advanced options, developers can always choose to write custom animations in plain Javascript or jQuery. Animations on scroll can be made with Intersection Observer API, a native Javascript API which allows detection of HTML elements in the viewport or ancestor elements.

In the next few steps, we will guide you through the process of making such an animation. If we take a look at the home page of our website, you can see that on the services section there is a weird blob shape which appears when the element enters the viewport.

First, let’s take a look at the HTML and SCSS.

<div class="col-12 services__blob" id="servicesBlob">
           <svg id="Layer_1" class="svg" height="1500" width="300" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 222.02 633.59"><defs><style>.cls-1{fill:#b26bab;}.cls-1,.cls-2{isolation:isolate;}.cls-2{fill:#7951a0;}</style></defs><path id="mrka" class="cls-1" d="M0,8.34S24.39,28.57,30,49.88,40.64,126.67,142.91,192s98,206.5,29.29,248S0,641.93,0,641.93Z" transform="translate(0 -8.34)"/><path id="brka" class="cls-2" d="M0,19.44s23.38,19.4,28.74,39.82S39,132.88,137,195.52s94,198,28.09,237.78S0,626.84,0,626.84Z" transform="translate(0 -8.34)"/></svg>
       </div>

#servicesBlob {
   svg {
       transition: all 1s ease-in;
       transform: translateX(-100%);
   }
}

Once the element is placed in the HTML, we added some styling to hide it, which will later allow us to add some transition effect, like so:

Now, let’s turn over to the Javascript. First, the element needs to be targeted using an id, or the class:

const statusText = document.getElementById("servicesBlob");

We then write a callback function that does something when our element becomes visible, or “intersects”. In this case, we just want to add or remove a class to handle our transition.

const callback = (entry, observer) => {
     if (entry.isIntersecting) {
       entry.target.classList.add('blob-animate')
     } else {
       entry.target.classList.remove('blob-animate')
     }
 }

.blob-animate {
   svg {
       transform: translateX(0%) !important;
   }
}

Now we want to specify some configuration options to pass to the observer.

const options = {
   root: null,
   threshold: 0.3,
 }

Threshold value specifies at what percentage of the target’s visibility the observer’s callback will be executed. In this case, the target callback fires when the third of the element is visible. Root value indicates the element used for checking the visibility of the target, which, if set to null, means the whole viewport.

Then, we need to create a new Intersection Observer instance and pass it the callback function we just wrote and the options array.

const myObserver = new IntersectionObserver(callback, options)

Using the observe method we tell the observer to start watching for the target element that was selected above.

 myObserver.observe(statusText)