Documentation

Documentation

JavaScript

Feature comparison

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 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:

Motion
Other JavaScript libraries
Block JavaScript

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

  • ⚠ Partial support

  • ⚛️ React/Vue 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.


animate mini

animate

GSAP

Core bundlesize (kb)

2.5

17

23.5

General




MIT license

Accelerated animations

React API

✅ (+15kb)

Vue API

🚧

IE11 support

Values




Individual transforms

Complex transform
interpolation

Named colors

⚠ (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




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

✅ (+1kb)

Spring physics

Inertia

✅ ($99/yr)

Custom easing
functions

✅ ⏩

Events




Complete

Cancel

Start

Update

Repeat

Path




Motion path

✅ ⏩

✅ ⏩

✅ (+9.5kb)

Path morphing

✅ (+Flubber)

✅ (+$149/yr)

Path drawing

✅ ($99/yr)

Scroll




Scroll trigger

✅ (+0.5kb)

✅ (+0.5kb)

✅ (+12kb)

Scroll-linked
animations

✅ (+2.5kb)

✅ (+2.5kb)

✅ (+12kb)

Hardware accelerated
animations

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:

Motion
Other JavaScript libraries
Block JavaScript

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

  • ⚠ Partial support

  • ⚛️ React/Vue 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.


animate mini

animate

GSAP

Core bundlesize (kb)

2.5

17

23.5

General




MIT license

Accelerated animations

React API

✅ (+15kb)

Vue API

🚧

IE11 support

Values




Individual transforms

Complex transform
interpolation

Named colors

⚠ (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




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

✅ (+1kb)

Spring physics

Inertia

✅ ($99/yr)

Custom easing
functions

✅ ⏩

Events




Complete

Cancel

Start

Update

Repeat

Path




Motion path

✅ ⏩

✅ ⏩

✅ (+9.5kb)

Path morphing

✅ (+Flubber)

✅ (+$149/yr)

Path drawing

✅ ($99/yr)

Scroll




Scroll trigger

✅ (+0.5kb)

✅ (+0.5kb)

✅ (+12kb)

Scroll-linked
animations

✅ (+2.5kb)

✅ (+2.5kb)

✅ (+12kb)

Hardware accelerated
animations

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:

Motion
Other JavaScript libraries
Block JavaScript

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

  • ⚠ Partial support

  • ⚛️ React/Vue 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.


animate mini

animate

GSAP

Core bundlesize (kb)

2.5

17

23.5

General




MIT license

Accelerated animations

React API

✅ (+15kb)

Vue API

🚧

IE11 support

Values




Individual transforms

Complex transform
interpolation

Named colors

⚠ (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




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

✅ (+1kb)

Spring physics

Inertia

✅ ($99/yr)

Custom easing
functions

✅ ⏩

Events




Complete

Cancel

Start

Update

Repeat

Path




Motion path

✅ ⏩

✅ ⏩

✅ (+9.5kb)

Path morphing

✅ (+Flubber)

✅ (+$149/yr)

Path drawing

✅ ($99/yr)

Scroll




Scroll trigger

✅ (+0.5kb)

✅ (+0.5kb)

✅ (+12kb)

Scroll-linked
animations

✅ (+2.5kb)

✅ (+2.5kb)

✅ (+12kb)

Hardware accelerated
animations

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.