Tailwind CSS Motion: Next-Level Animations Made Easy!
Introducing tailwindcss-motion
Brought to you by RomboHQ, tailwindcss-motion
is an exciting Tailwind CSS plugin that makes creating animations simple yet impactful. With an intuitive syntax and powerful preset animations, you can bring life to your designs without writing complex keyframes. It's truly "Motion, without commotion."
βοΈ Installation
Setting up tailwindcss-motion
is straightforward. Hereβs how:
- Install the plugin via npm:
npm i -D tailwindcss-motion
- Integrate it in your Tailwind config file:
// tailwind.config.js
export default {
content: [...],
theme: { extend: {} },
plugins: [require('tailwindcss-motion')],
};
Or, using ESM:
import tailwindcssMotion from "tailwindcss-motion";
export default {
content: [...],
theme: { extend: {} },
plugins: [tailwindcssMotion],
};
How It Works
tailwindcss-motion
offers easy-to-use utility classes for animating elements in any Tailwind CSS project. No need for custom keyframes! Just apply classes like motion-translate-x-in-25
or motion-opacity-in-0
, or use presets for popular effects.
Animation Presets
Choose from a wide range of preset animations to bring your designs to life:
-
Enter Animations:
motion-preset-fade
,motion-preset-slide-right
,motion-preset-focus
, and more! -
Loop Animations:
motion-preset-pulse
,motion-preset-spin
,motion-preset-blink
, etc. -
Unique Effects: Try
motion-preset-typewriter-[number of characters]
,motion-preset-flomoji
, or the funmotion-preset-confetti
.
Customizing Presets
Want more control? Customize animations by combining base animations and modifier classes for unique effects.
πΉ Watch Above Video
For a full walkthrough, check out above video which dive into using tailwindcss-motion
with Next.js to create visually stunning animations in minutes!
Top comments (0)