There are many situations where you need to add motion with HTML, such as website interactions and UI effects. Many readers have probably used CSS Transitions for simple animations on HTML elements. However, when JavaScript is needed for Canvas, SVG, or similar work, CSS Transitions are not enough, and an animation library may be required.

JavaScript animation libraries come in many forms, so choosing which one to use can be difficult. This article introduces the usability and syntax of JavaScript libraries for animating HTML.

Six widely used JS libraries covered in this article

This article covers the following six widely used JavaScript libraries.

• GSAP v3.14
• Anime.js v4
• Motion v12
• Tween.js v25
• jQuery v4
• Web Animations API

Note: File size, license, and other details for each library are listed at the end of the article.

GSAP - a fast, feature-rich library

Concurrent performance: 3/3 / Footprint: 1/3 / Features: 3/3

GSAP is a long-running, high-end library that has existed since the Flash era. It used to be known under library names such as “TweenMax” and “TweenLite,” but since fall 2019, the brand name has been unified as “GSAP.”

GSAP includes a substantial set of features. It is recommended for developers who want to try a wide range of expressive motion or animate many objects smoothly.

Code example

gsap.to(".rect", {
  duration: 3, // In seconds
  x: 700,
  rotate: 360,
  repeat: -1, // Repeat
  ease: "power3.inOut" // Easing type
});

Result

• Open the demo in a new window
• View the source code

At 73 KB, GSAP is somewhat large, but it supports tree shaking. It can also be used with the npm package manager and TypeScript.

GSAP has been developed continuously for a long time, going back to the Flash era. Its GitHub contributor history also shows frequent updates.

GSAP is 100% free, including commercial use. In the past, some use cases required a paid license, but since v3.13 in April 2025, even the bonus plugins have been available for free. See the following official pages for details.

• Pricing | GSAP
• Standard “No Charge” GSAP License
• 3.13 release

ICS MEDIA also introduces applied GSAP examples, including scroll effects and WebGL effects.

• Getting started with GSAP, part 1: Basics of JavaScript animation
• アニメーション最強のライブラリGSAP
• GSAPを使ったタイムリマップ表現
• JavaScriptで作る本格スクロール演出

GSAP also provides functionality that supports integration with React.

• React & GSAP | GSAP | Docs & Learning

Motion - a library suited to declarative UI

Concurrent performance: 1/3 / Footprint: 1/3 / Features: 2/3

Motion is an animation library designed for modern UI libraries.

It can be integrated into React and Vue as declarative UI, and it can also be used with vanilla JavaScript. It is also notable for its high number of downloads on npm. See npm trends.

Code example

Sample code with vanilla JavaScript

import { animate } from "motion";

animate(".rect", {
  x: 800,
  rotate: 360,
}, {
  duration: 3.0, // In seconds
  repeat: Infinity, // Repeat
  ease: "easeInOut" // Easing
});

Sample code with React

import { motion } from "motion/react";

function Component() {
  return <motion.div animate={{ x: 800, rotate: 360 }} />
}

• Open the demo in a new window
• View the source code

Motion evolved as follows.

1. Popmotion: A lightweight JS library that appeared around 2015.
2. Framer Motion: A motion library for React. The creator of Popmotion joined Framer, and Popmotion was used as its internal engine.
3. Motion: The successor to Framer Motion. It supports Vue and vanilla JavaScript in addition to React.

For that reason, developers using Popmotion or Framer Motion should consider migrating to Motion. Development of its predecessor, Popmotion, has slowed down since 2022. See GitHub.

In our concurrent performance tests, Motion did not perform as highly as GSAP or Anime.js. GSAP and Anime.js also have the edge when it comes to animation-oriented features and plugin depth.

ICS MEDIA explains Motion in more detail in the following article.

• 8 polished microinteractions with React and Motion

Anime.js - a library with a rich API

Concurrent performance: 3/3 / Footprint: 1/3 / Features: 3/3

Anime.js is a JS library that appeared in 2016. The stylish demo released at launch, which was listed on the official site at the time, attracted attention. The official site, redesigned in 2025, also uses tasteful motion. For Japanese engineers, it is nice to see a library created outside Japan use the name “Anime.” The documentation demos are also easy to understand.

You can also define different animations per property. One of its strengths is that animations can be specified intuitively with concise syntax.

Code example

import { animate } from "animejs";
animate(".rect", {
  x: 800,
  rotate: 360,
  duration: 3000, // In milliseconds
  loop: true, // Repeat
  easing: "easeInOutCubic" // Easing type
});

• Open the demo in a new window
• View the source code

Like GSAP, Anime.js lets you use shortcuts such as x and rotate for transform values such as position and rotation, which is convenient.

Anime.js version 4 was released around 2024, and active development is still continuing as of 2026. In earlier versions, its concurrent performance was lower than GSAP and TweenJS, but version 4 has reached a similar level of performance.

Anime.js also provides functionality that supports integration with React.

• Using with React | Anime.js | JavaScript Animation Engine

Tween.js - a library for plain JavaScript

Concurrent performance: 2/3 / Footprint: 3/3 / Features: 1/3

Tween.js has a limited feature set, and its small footprint is its main strength. It avoids unnecessary features and focuses on a plain design.

The word “tween,” used in many library names, originally comes from Flash terminology. It derives from “between,” referring to the space between a start value and an end value. A feature that changes properties until they reach an end value is called a “tween.”

Tween.js does not automatically complete CSS units, so controlling HTML elements with it requires verbose code, as shown below. It is not well suited to CSS. It is better suited to WebGL, WebGPU, and Canvas production.

Code example

import { Tween, Easing } from "@tweenjs/tween.js";

const element = document.querySelector(".rect"); // Get the element
const param = { x: 0, rotation: 0 }; // Create a virtual object for changing values

const tween = new Tween(param)
  .to({ x: 800, rotation: 360 }, 3000)
  .repeat(Infinity) // Repeat
  .easing(Easing.Cubic.InOut) // Easing type
  .onUpdate(function () {
    // On update
    // Apply the virtual object values to the element
    element.style.transform = `translateX(${param.x}px) rotate(${param.rotation}deg)`;
  })
  .start();

// Update at any timing
loop();

function loop() {
  requestAnimationFrame(loop);
  tween.update();
}

Result

• Open the demo in a new window
• View the source code

Tween.js appears to be under continuous development. See GitHub.

Note that CreateJS has a library with a similar name, TweenJS, but it is a different library from Tween.js.

jQuery - a battle-tested technology that works in many environments

Concurrent performance: 1/3 / Footprint: 1/3 / Features: 1/3

jQuery provides a function called animate() for animation. It is easy to introduce because it can be used simply by loading jQuery. However, it cannot handle complex requirements well because it has only a few easing types and very limited options. It is also inconvenient that there are no shortcuts for transform values such as position and rotation.

Code example

$(".rect")
  .css({ left: 0 }) // Initial value
  .animate(
    { left: 800 },
    3000, // In milliseconds
    "linear", // Easing type
  );

• Open the demo in a new window
• View the source code

Because jQuery’s animate() method can be replaced by the Web Animations API described later, there is little reason to use jQuery’s animate() today.

Web Animations API - for animating DOM elements

Concurrent performance: 2/3 / Footprint: 3/3 / Features: 1/3

Web Animations API is an API for animating DOM elements. It is supported by all major browsers: Chrome, Edge, Firefox, and Safari.

Its syntax is simple. Compared with similar standard technologies such as CSS Transitions and CSS Animations, it is easier to control from JavaScript.

Code example

// Get the element
const element = document.querySelector(".rect");
element.animate(
  {
    transform: [
      "translateX(0px) rotate(0deg)", // Start value
      "translateX(800px) rotate(360deg)" // End value
    ]
  },
  {
    duration: 3000, // In milliseconds
    iterations: Infinity, // Number of repetitions
    direction: "normal", // Repeat behavior
    easing: "ease" // Easing type
  }
);

• Open the demo in a new window
• View the source code

The Web Animations API is a feature for HTML elements, so it cannot be used for WebGL, WebGPU, or Canvas.

Because it is not a library, there is no extra file size to worry about. Rather than choosing it for performance reasons, it is better to choose it based on whether you want to stay independent of any library.

Appendix: library size, licenses, and related details

Overview

Note: File sizes are representative distributed file sizes. They are not GZIP sizes.

Features

References

• Timeline: Getting started with GSAP, part 2: Timelines and scroll effects
• FLIP: JavaScriptで実現するFLIPアニメーションの原理と基礎
• Scroll-linked animation: JavaScriptで作る本格スクロール演出
• Stagger: Staggered motion
• CSS mapping: This indicates whether values such as x are mapped to transform or left, and whether values such as rotate are mapped to transform.

Conclusion: choose the right library for your purpose

Which library you should use depends on your goal. GSAP is attractive because it is both feature-rich and performant, while Anime.js is also a good choice because DOM control can be written concisely. It is best to choose the right library by considering factors such as learning cost, long-term prospects, maturity, runtime environment, ease of debugging, and development tooling.

If researching the options feels like too much work, GSAP is probably a good default choice. The basic usage patterns are similar across these libraries, so once you learn one of them, that knowledge will transfer to other libraries.

If you want to implement spring animation with CSS linear() instead of relying on a library, see Using CSS linear() for spring animations in UI. For small DOM-centered UI elements, CSS alone is often enough.

The follow-up article JSライブラリの性能をDOMとWebGPUで比較検証 introduces the performance of each library, including concurrent animation performance. Read it alongside this article.