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 biggest libraries for animating the DOM are Framer Motion and GSAP.
All three libraries are fundamentally different in that GSAP runs animations purely on requestAnimationFrame
(rAF
). Framer Motion takes a hybrid approach, running animations via Web Animations API (WAAPI) when an animation will benefit from hardware acceleration and rAF
otherwise. Motion One runs animations purely via WAAPI.
These approaches come with different trade-offs that we'll explore in this article. You'll also find a full comparison table at the end of the page.
Benefits of WAAPI
WAAPI is an API that lets the browser run an animation. Using this gives Motion One several broad benefits:
Far smaller bundlesize
Hardware accelerated animations
Excellent value interpolation
Bundlesize
Because the animation and interpolation logic is present in the browser, unlike other animation libraries Motion One doesn't make you download it a second time.
This leads to a tiny bundlesize. For example, the core animate()
function is just 3.5kb. By comparison, Framer Motion is around 17kb and GSAP 23.5kb.
Further, GSAP doesn't support tree-shaking, which means using any part of its library imports all of it. Whereas with Motion One you only use the bits you import.
Likewise, as support for the CSS Properties and Values API improves, Motion One will soon be able to shed even more weight to get down as low as 1.8kb.
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 have previously read 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.
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:
In the majority of browsers, the left ball will continue animating at 60fps, even as the website becomes unresponsive.
These days, even more values like filter and background-color are hardware accelerated, with more to come.
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 for SVG attributes or custom JS values we need a larger JS animation library.
Comparison table
This table compares Motion One's animate()
function, Framer Motion's animate()
function, and GSAP's gsap
object.
Key
✅ Supported
❌ Not supported
⏩ Support relies on modern browser features
🚧 In development
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.
Motion One | Framer Motion | Greensock | |
---|---|---|---|
Core bundlesize (kb) | 3.8 | 15.5 | 23.5 |
General | |||
MIT license | ✅ | ✅ | ❌ |
Accelerated animations | ✅ | ✅ | ❌ |
React API | ❌ | ✅ (+15kb) | ❌ |
No-code editor | ❌ | ✅ | ❌ |
IE11 support | ❌ | ❌ | ✅ |
Values | |||
Individual transforms | ✅ | ✅ | ✅ |
Complex transform interpolation | ✅ | ❌ | ✅ |
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 | ❌ | ✅ | ✅ |
Custom animations | ✅ | ✅ | ✅ |
Options | |||
Duration | ✅ | ✅ | ✅ |
Direction | ✅ | ✅ | ✅ |
Repeat | ✅ | ✅ | ✅ |
Delay | ✅ | ✅ | ✅ |
End delay | ✅ | ❌ | ✅ |
Repeat delay | ❌ | ✅ | ✅ |
Stagger | |||
Stagger | ✅ (+0.1kb) | ✅ (+0.1kb) | ✅ |
Min delay | ✅ | ✅ | ✅ |
Ease | ✅ | ✅ | ✅ |
Grid | ❌ | ❌ | ✅ |
Layout animations | |||
Animate layout | ❌ | ✅ | ✅ |
Transform-only | ❌ | ✅ | ❌ |
Scale correction | ❌ | ✅ | ❌ |
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/Inertia | ✅ (+0.3kb & Spring) | ✅ | ✅ ($99/yr) |
Custom easing functions | ✅ ⏩ | ✅ | ✅ |
Events | |||
Complete | ✅ | ✅ | ✅ |
Cancel | ✅ | ✅ | ✅ |
Start | ❌ | ✅ | ✅ |
Update | ❌ | ✅ | ✅ |
Repeat | ❌ | ✅ | ✅ |
Path | |||
Motion path | ✅ ⏩ | ✅ ⏩ | ✅ (+9.5kb) |
Path morphing | ✅ (+ External library) | ✅ (+ External library) | ✅ (+$149/yr & +8.7kb) |
Path drawing | ✅ | ✅ | ✅ ($99/yr) |
Scroll | |||
Scroll trigger | ✅ (+0.5kb) | ✅ (+0.5kb) | ✅ (+12kb) |
Scroll-linked animations | ✅ (+2.5kb) | ✅ (+2.5kb) | ✅ (+12kb) |