Beautiful, Performant, Accessible

Motion made simple,
for Tailwind CSS

npm i -D tailwindcss-motion

A new simple syntax animation library.
Batteries included. Infinitely configurable.

Open Source / MIT License

GitHub

Simple interface, infinite configurability

An intuitive syntax — built for movement.

Accessible by design

Animation accessibility is no longer a nice-to-have. We’ve built in accessibility by default.

Performance tested & optimized

No need to worry about browser-compatibility, property calculations, frames-per-second.

Installation

1
npm i -d tailwindcss-motion
2 
// tailwind.config.js

export default {
     theme: {
        extend: {}, 
    },
   plugins: [require('tailwindcss-motion')], 
};

Documentation

View full documentation →

Usage

Presets

Settings

Custom Animations

0ms
ms
Scale
%
100%
Translate
X%
Y%
100%
Opacity
%
100%
Rotate
°
0°
Blur
px
0px

Animator is best experienced on a desktop device.
Use Rombo's Extension to build with the visual animator on any site or localhost
Get the Extension

Build with the visual animator inline, on your site — export the code to Tailwind CSS, Framer Motion, GSAP & more.