CSS

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"