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')], 
};

Usage

Presets

Settings

Custom Animations

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

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

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