Documentation

Documentation

JavaScript
CSS

CSS

Motion+ Early Access

Motion+ Early Access

Checking Motion+ status…

Unlocks for everyone in

40 Days 08 Hours 19 Minutes

Or

Already joined?

Checking Motion+ status…

Unlocks for everyone in

40 Days 08 Hours 19 Minutes

Or

Already joined?

Checking Motion+ status…

Unlocks for everyone in

40 Days 08 Hours 19 Minutes

Or

Already joined?

It's common to reach for a JavaScript library like Motion when you want to perform spring animations. But Motion is also capable of generating springs via CSS, both on the server and in the browser.

In this guide, we'll learn how to make spring animations with CSS, with a variety of libraries and frameworks:

  • React Server Components

  • Via the style attribute

  • CSS-in-JS (Styled Components, Tamagui)

  • React

  • Vue

We'll also learn how to fall back to either no animation or a different animation for cross-browser support.

Import

To generate our spring CSS rules, we're going to be using Motion's spring() function.

import { spring } from "motion"