Web Animations API: How to Animate Your Website Without Third-Party Libraries

Adel Benyahia
4 min readDec 24, 2022
Photo by Indira Tjokorda on Unsplash

Looking to add animation to your web application? You're in luck! In this step-by-step tutorial, we'll explore how to use the Web Animations API to animate DOM elements on your website. Best of all, no third-party libraries or additional packages are necessary. Let's dive in and bring your website to life with some dynamic and engaging animations!

Table of Contents

  1. Web Animations API: What It Is and How to Use It
  2. Browser Support for Web Animations API
  3. Let’s code
  4. Full project source code
  5. Conclusion

1. Web Animations API: What It Is and How to Use It

The Web Animations API allows for synchronizing and timing changes to the presentation of a Web page, i.e. animation of DOM elements. It does so by combining two models: the Timing Model and the Animation Model.

The Web Animations API provides a common language for browsers and developers to describe animations on DOM elements

It opens the browser’s animation engine to developers and manipulation by JavaScript. This API was designed to underlie implementations of both CSS Animations and CSS Transitions, and leaves the door open to future animation effects. It is one of the most performant ways to animate on the Web, letting the browser make its own internal optimizations without hacks

source: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API

2. Browser Support for Web Animations API

All major browser support Web Animations API

3. Let’s code

We will use vanilla JavaScript, but you can use any framework based on it like ReactJS for example

In this example we will use build-in Web Animations API to animate a square with only JavaScript, no extra library is needed

  • Create the file “src/styles.css”
.square {
width: 100px;
height: 100px;
border: 2px solid red;
background-color: red;
margin: 5px;
}
.button {
height: 40px;
}

This file contain two CSS class (square: to style a square red div and a simple button style)

  • Create the file “index.html”
<!DOCTYPE html>
<html>
<head>
<title>Web Animations API example</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="src/styles.css" />
</head>

<body>
<div id="app">
<h1>Web Animations API example</h1>
<p>
In this example we will demonstrate how to use the new build-in Web
Animations API
</p>
</div>

<div id="squade" class="square"></div>
<button id="animateButton">Animate</button>
<script src="src/index.js"></script>
</body>
</html>

This files contain a <div> with the CSS class “square” and id “square”, and a button with the id “animateButton”

  • Create the file “src/index.js”
const SquareAnimation = document.getElementById("squade").animate(
[
//Keyframes
{ transform: "translateX(0)" },
{ transform: "translateX(100px)" },
{ transform: "translateX(200px)" },
{ transform: "translateX(300px)" },
{ transform: "translateX(400px)" },
],
//Timing object
{
duration: 2000,
//iterations:infinity
iterations: 2,
direction: "alternate",
easing: "ease-in-out"
}
);
SquareAnimation.pause();
document.getElementById("animateButton").addEventListener("click", () => {
SquareAnimation.play();
});

We will use the getElementById() to select the div with the id “square” and apply the animate method on it

animate accept two params: Keyframes and timing object

const SquareAnimation = document.getElementById("squade").animate(
[
//Keyframes

],
//Timing object
{

}
);
const SquareAnimation = document.getElementById("squade").animate(
[
//Keyframes
{ transform: "translateX(0)" },
{ transform: "translateX(100px)" },
{ transform: "translateX(200px)" },
{ transform: "translateX(300px)" },
{ transform: "translateX(400px)" },
],
//Timing object
{
duration: 2000,
//iterations:infinity
iterations: 2,
direction: "alternate",
easing: "ease-in-out"
}
);

In this example we used CSS @keyframes block, in our case: “transform”

And in the Timing Object:

  • duration: the duration of the animation in milliseconds.
  • iterations: the number of times the animation sequence should be played before stopping
  • direction: “alternate” the animation go to the two directions
  • easing: the animation transition

Note: There are a number of small differences between the terminology used in CSS Animations and the terminology used in Web Animations. For instance, Web Animations doesn’t use the string "infinite", but instead uses the JavaScript keyword Infinity. And instead of timing-function we use easing. We aren't listing an easing value here because, unlike CSS Animations where the default animation-timing-function is ease, in the Web Animations API the default easing is linear — which is what we want here.

Now we will add a “play()”, “pause()” to add more control to our animation

The “src/index.js” will look like this

const SquareAnimation = document.getElementById("squade").animate(
[
//Keyframes
{ backgroundColor: "red" },
{ transform: "translateX(0)" },
{ transform: "translateX(100px)" },
{ backgroundColor: "#983746" },
{ transform: "translateX(200px)" },
{ backgroundColor: "#6d466e" },
{ transform: "translateX(300px)" },
{ backgroundColor: "#3a589e" },
{ transform: "translateX(400px)" },
{ backgroundColor: "#6284FF" }
],
//Timing object
{
duration: 2000,
//iterations:infinity
iterations: 2,
direction: "alternate",
easing: "ease-in-out"
}
);
SquareAnimation.pause();
document.getElementById("animateButton").addEventListener("click", () => {
SquareAnimation.play();
});

Just after the animation we added

SquareAnimation.pause();

To prevent the animation from auto starting

Then we added

SquareAnimation.play();

To the button (with id “animateButton”) a click event to start the animation manually

5. Conclusion
JavaScript have evolved significantly over time, with has helped simplify web development, These improvements have been particularly useful in areas such as animations, making it easier to create smooth and responsive user experiences.

Thanks for reading 🙂

4. Complete project source code

We have added a background transition from red to blue to demonstrate another CSS keyframe

--

--

Adel Benyahia

Web application developer (HTML │ CSS │ JS | ReactJS | NextJS | NestJS | MERN)