Add support for staggered animations

README.md

@@ -50,10 +50,26 @@ export default {
 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)
 
+### Staggered Animations
+
+The `motion-stagger` utility allows you to create staggered animations with incremental delays for multiple elements. This utility is useful for animating list or grid items with a smooth staggered effect.
+
+**Usage:**
+
+```html
+<ul class="motion-stagger-100">
+  <li class="motion-opacity-in-0">Item 1</li>
+  <li class="motion-opacity-in-0">Item 2</li>
+  <li class="motion-opacity-in-0">Item 3</li>
+</ul>
+```
+
+In the example above, each list item will have an incremental delay of 100ms, creating a staggered animation effect.
 
 ## 🧩 Introducing the Chrome Extension
 Take your animations to the next level with the [Rombo Chrome Extension](https://rombo.co/extension/)!

src/modifiers.js

@@ -1,4 +1,3 @@
-// Define spring types and their corresponding perceptual duration multipliers
 export const springPerceptualMultipliers = {
   "var(--motion-spring-smooth)": "1.66",
   "var(--motion-spring-snappy)": "1.66",
@@ -98,6 +97,21 @@ export function addModifiers(matchUtilities, addUtilities, theme) {
     }
   );
 
+  // stagger
+  matchUtilities(
+    {
+      "motion-stagger": (value, { modifier }) => {
+        const staggerValue = parseFloat(value);
+        return {
+          "--motion-stagger-delay": `calc(var(--motion-stagger-index, 0) * ${staggerValue}ms)`,
+        };
+      },
+    },
+    {
+      values: theme("motionStagger"),
+    }
+  );
+
   // ease
   matchUtilities(
     {
@@ -295,6 +309,13 @@ export const modifiersTheme = {
     ...theme("motionDuration"),
     DEFAULT: "0ms",
   }),
+  motionStagger: {
+    100: "100",
+    200: "200",
+    300: "300",
+    400: "400",
+    500: "500",
+  },
   motionLoopCount: {
     infinite: "infinite",
     once: "1",