Feature comparison

Overview

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

The two best established libraries for animating the DOM are Anime.js and Greensock. Unlike these libraries, Motion One is built on the Web Animations API (WAAPI), which comes with different trade-offs.

Benefits

Broadly, the benefits are:

  • Far smaller bundlesize
  • Hardware accelerated animations
  • Excellent value interpolation

Bundlesize

Motion One is built on WAAPI, so unlike other animation libraries it doesn't force users to download code already present in their browser.

This leads to a tiny bundlesize. The core animate function is just 3.3kb. By comparison, Anime.js is 7kb and Greensock 23.5kb. And because neither support tree-shaking, using any part of them is using all of them.

As support for the CSS Properties and Values API improves, Motion One will be able to drop even more weight to get down as low as 1.8kb.

Hardware acceleration

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

You might have heard that for best performance you should only animate opacity and transform because these styles don't trigger layout or paint, they're handled entirely by the browser's compositor.

Values like this 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 One, and the ball on the right by a traditional animation library. Press the "Block JavaScript" button to block JS execution for two seconds:

Motion One
Other JavaScript libraries

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

Additionally, as browsers optimise more values (Chrome is adding SVG and background-color soon), Motion One will gain even more performance over time.

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 Motion One's bundlesize savings come from not needing to include this code, but there's an added benefit in that the browser's interpolation code is usually much better because it doesn't have to worry about bundlesize.

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.

Limitations

The main limitation of WAAPI is it can only animate CSS styles. So it can't animate HTML text, JavaScript values, or SVG attributes like d (although SVG styles work fine).

However, Motion One uses a small polyfill to support animating individual transforms, so in the future this could form the basis of an API to support these kinds of animations.

Comparison table

Key

  • ✅ Supported
  • ❌ Not supported
  • ⏩ Support relies on modern browser features
  • 🚧 In development

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

Motion OneAnime.jsGreensock
Core bundlesize (kb)
3.3
7
23.5
Values
Individual transforms
Transform
Named colors✅ (subset of 20)
Color type conversion
To/from CSS variables
To/from CSS functions
Animate CSS variables✅ ⏩
Simple keyframes syntax
Wildcard keyframes
Relative values
Output
Element styles
Element attributes
Raw JS output🚧
Options
Duration
Direction
Repeat
Delay
End delay
Repeat delay🚧
Stagger
Stagger✅ (+0.1kb)
Min delay
Ease
Grid
Timeline
Timeline✅ (+0.6kb)
Selectors
Relative offsets
Absolute offsets
Start of previous offset
Percentage offsets
Label offsets🚧
Segment stagger
Segment keyframes
Controls
Play
Pause
Finish
Reverse
Stop
Playback rate
Easing
Linear
Cubic bezier
Steps
Spring simulation✅ (+1kb)
Glide✅ (+0.3kb & Spring)✅ ($99/yr)
Spring easing
Custom easings
Events
Complete
Cancel
Start
Update
Repeat
Path
Motion path✅ ⏩✅ (+9.5kb)
Path morphing✅ (Same number of points only)✅ (+$149/yr & +8.7kb)
Path drawing✅ ($99/yr)
Other
MIT license
Accelerated animations
IE11 support

Stay updated with the Motion One newsletter. We don't spam, and unsubscription is instant.