https://github.com/romboHQ/tailwindcss-motion
tailwindcss-motion is a Tailwind CSS Plugin made at RomboHQ. It’s a simple, yet powerful, animation library with a simple syntax.
https://github.com/romboHQ/tailwindcss-motion
animate animation css design motion preset tailwindcss tailwindcss-plugin
Last synced: 2 months ago
JSON representation
tailwindcss-motion is a Tailwind CSS Plugin made at RomboHQ. It’s a simple, yet powerful, animation library with a simple syntax.
- Host: GitHub
- URL: https://github.com/romboHQ/tailwindcss-motion
- Owner: romboHQ
- License: mit
- Created: 2024-09-20T19:37:08.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-10-17T20:56:53.000Z (6 months ago)
- Last Synced: 2024-10-30T00:06:36.052Z (6 months ago)
- Topics: animate, animation, css, design, motion, preset, tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage: https://rombo.co/tailwind/
- Size: 151 KB
- Stars: 734
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - tailwindcss-motion - motion is a Tailwind CSS Plugin made at RomboHQ. It’s a simple, yet powerful, animation library with a simple syntax. | romboHQ | 2948 | (TypeScript)
README
# ✨ [tailwindcss-motion](https://rombo.co/tailwind/) ✨
[](https://www.npmjs.com/package/tailwindcss-motion)
[](https://www.npmjs.com/package/tailwindcss-motion)
tailwindcss-motion is a Tailwind CSS Plugin made at [RomboHQ](https://rombo.co/).
It’s a simple, yet powerful, animation library with a simple syntax.
_Motion, without commotion._
## ⚒️ Installation
**1. Install npm package**
```bash
npm i -D tailwindcss-motion
```
**2. Add into your tailwind.config.js**
```js
// tailwind.config.js
export default {
content: [...],
theme: {
extend: {...},
},
plugins: [require('tailwindcss-motion')],
};
```
**or,** to use ESM:
```js
import tailwindcssMotion from "tailwindcss-motion";
/** @type {import('tailwindcss').Config} */
export default {
content: [...],
theme: {
extend: {},
},
plugins: [tailwindcssMotion],
};
```
## How does it work?
We provide a simple syntax to animate any element in your Tailwind project. Instead of defining custom keyframes, we provide utility classes to animate every dimension, inline.
For example, for a slide and fade effect — you simply need `motion-translate-x-in-25 motion-opacity-in-0` or, you can use one of our presets with `motion-preset-fade`
## Documentation
For full documentation, visit [docs.rombo.co/tailwind](https://docs.rombo.co/tailwind)
## 🧩 Introducing the Chrome Extension
Take your animations to the next level with the [Rombo Chrome Extension](https://rombo.co/extension/)!
Create animations visually:
- Use our intuitive animator directly in your browser.
- Loop animations
- Save presets: Keep your animations organized and reusable.
- Export options: Output animations as Tailwind classes, pure CSS, or Framer Motion code.
## Examples
Landing page - https://play.tailwindcss.com/uAuVF8F1vC
Chat dialog - https://play.tailwindcss.com/gjGqEKswjQ
Low Battery Dynamic Island - https://play.tailwindcss.com/tvYFbHtNNQ
Apple Color Swatches - https://play.tailwindcss.com/cvQ3Nk3v8j
Rombo Loop - https://play.tailwindcss.com/MLdegkb9Wq
Emoji Animations - https://play.tailwindcss.com/86s55I4wmC
## What's Rombo?
Rombo is an early-stage company, building tools to help companies build beautiful interactive interfaces. We're starting out with a toolkit for engineers, designers and creative marketers to animate natively inside common Workflows — like Tailwind, Figma, Webflow, Shopify & more to come!
## More Resources
- [Bringing Motion to Tailwind CSS: Building an animation plugin at Rombo](https://www.kvin.me/posts/tailwind-motion) - Blog post about the creation of this library
- [Animator Builder](https://rombo.co/tailwind/#animator) - Create animations intuitively and export them to Tailwind classes
- [UnoCSS port](https://github.com/whatnickcodes/unocss-preset-tailwindcss-motion) - Port created by [@whatnickcodes](https://github.com/whatnickcodes)