Overview

There are so many JavaScript libraries to choose from, it can be difficult to decide which is right for your project.

The two biggest animation libraries are Motion and GSAP.

The two libraries are fundamentally different in that GSAP runs animations purely on requestAnimationFrame (rAF), whereas Motion has a unique hybrid engine that can run animations both via rAF and via native browser APIs like Web Animations API (WAAPI) and ScrollTimeline.

Benefits of native browser APIs

The ability to use WAAPI and ScrollTimeline gives Motion some unique benefits, notably the smaller bundlesize and hardware accelerated animations.

Bundlesize

Motion's mini animate() is just 2.5kb, and its full-featured hybrid animate() function is 17kb. By comparison, GSAP is around 23kb.

Further, GSAP doesn't support tree-shaking, which means using any part of its library imports all of it. Whereas with Motion you only use the bits you import.

Hardware acceleration

"Hardware acceleration" means running animations outside the main JavaScript thread, usually on the GPU. This means if your app is performing heavy work, animations remain smooth.

You might already know that for best animation performance you should only animate opacity and transform because these styles don't trigger layout or paint, as they're handled entirely by the browser's compositor. These days, this is also true for filter and clipPath.

These values can enjoy an extra performance boost with hardware accelerated animations, as the animation itself can run off the main thread. That means if the browser is busy doing computation or rendering, your animations will remain smooth.

To illustrate, in the following example the ball on the left is animated with Motion, and the ball on the right by a traditional animation library. Press the "Block JavaScript" button to block JS execution for two seconds:

In the majority of browsers, the left ball will continue animating at 60fps, even as the website becomes unresponsive.

Value interpolation

Value interpolation is the process of mixing two values. For example, interpolating 1 and 2 by 0.5 would return 1.5. Interpolating over time is the foundation of most animation.

Interpolating numbers is cheap, both computationally and in terms of bundlesize. But animations can happen between all sorts of values, like the box shadows 10px 10px 5px red and 0px 0px 2px rgba(0, 0, 0, 0.2), and these complex values can be more expensive.

A large part of the mini animate bundlesize savings come from not needing to include this code.

So animating between different value types like rgba and hsla, or px and % or values computed from CSS functions like calc(), minmax() or var(), is all supported.

Comparison table

This table compares Motion's mini and full-size animate functions functions with GSAP's gsap object.

Key

• ✅ Supported

• ❌ Not supported

• ⏩ Support relies on modern browser features

• 🚧 In development

• ⚛️ React only

Note: While this list is extensive, it focuses on core library features. GSAP offers a ton of extra paid-for plugins in addition to the base GSAP library.