fix timing on loop presets

Author: KevinGrajeda

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-motion",
-  "version": "0.3.0-beta",
+  "version": "0.4.1-beta",
   "description": "Tailwind Motion is a Tailwind CSS Plugin made by Rombo. It’s a simple, yet powerful, animation library for Tailwind CSS.",
   "keywords": [
     "tailwindcss",

src/presets.js

@@ -526,7 +526,7 @@ export function addPresets(addComponents, matchComponents, theme) {
         return {
           "--motion-loop-scale-x": sizes[size],
           "--motion-loop-scale-y": sizes[size],
-          "--motion-ease": "cubic-bezier(0.4, 0, 0.2, 1)",
+          "--motion-timing": "cubic-bezier(0.4, 0, 0.2, 1)",
           "--motion-scale-loop-animation": scaleLoopAnimation("mirror"),
           animation: "var(--motion-all-loop-and-enter-animations)",
         };
@@ -539,7 +539,7 @@ export function addPresets(addComponents, matchComponents, theme) {
         };
         return {
           "--motion-loop-translate-x": sizes[size],
-          "--motion-ease": "cubic-bezier(0.4, 0, 0.2, 1)",
+          "--motion-timing": "cubic-bezier(0.4, 0, 0.2, 1)",
           "--motion-translate-loop-animation": translateLoopAnimation("mirror"),
           animation: "var(--motion-all-loop-and-enter-animations)",
         };
@@ -553,8 +553,8 @@ export function addPresets(addComponents, matchComponents, theme) {
         return {
           "--motion-loop-rotate": sizes[size],
           "--motion-rotate-loop-animation": rotateLoopAnimation("mirror"),
-          "--motion-timing": "var(--motion-spring-bounciest)",
-          "--motion-perceptual-duration-multiplier":
+          "--motion-rotate-timing": "var(--motion-spring-bounciest)",
+          "--motion-rotate-perceptual-duration-multiplier":
             springPerceptualMultipliers["var(--motion-spring-bounciest)"],
           animation: "var(--motion-all-loop-and-enter-animations)",
         };
@@ -567,7 +567,7 @@ export function addPresets(addComponents, matchComponents, theme) {
         };
         return {
           "--motion-loop-translate-y": sizes[size],
-          "--motion-ease": "cubic-bezier(0.4, 0, 0.2, 1)",
+          "--motion-timing": "cubic-bezier(0.4, 0, 0.2, 1)",
           "--motion-translate-loop-animation": translateLoopAnimation("mirror"),
           animation: "var(--motion-all-loop-and-enter-animations)",
         };
@@ -586,8 +586,8 @@ export function addPresets(addComponents, matchComponents, theme) {
         return {
           "--motion-loop-scale-x": xSizes[size],
           "--motion-loop-scale-y": ySizes[size],
-          "--motion-ease": "var(--motion-spring-bouncier)",
-          "--motion-perceptual-duration-multiplier":
+          "--motion-scale-timing": "var(--motion-spring-bouncier)",
+          "--motion-scale-perceptual-duration-multiplier":
             springPerceptualMultipliers["var(--motion-spring-bouncier)"],
           "--motion-scale-loop-animation": scaleLoopAnimation("mirror"),
           animation: "var(--motion-all-loop-and-enter-animations)",
@@ -601,8 +601,8 @@ export function addPresets(addComponents, matchComponents, theme) {
         };
         return {
           "--motion-loop-translate-y": sizes[size],
-          "--motion-ease": "var(--motion-spring-bouncier)",
-          "--motion-perceptual-duration-multiplier":
+          "--motion-translate-timing": "var(--motion-spring-bouncier)",
+          "--motion-translate-perceptual-duration-multiplier":
             springPerceptualMultipliers["var(--motion-spring-bouncier)"],
           "--motion-duration": "2000ms",
           "--motion-translate-loop-animation": translateLoopAnimation("mirror"),

web/src/pages/index.astro

@@ -7,7 +7,7 @@
     <div
       class="relative text-white text-6xl flex text-center font-black justify-center items-center h-screen flex-col bg-black"
     >
-      <div class="motion-translate-x-loop-[5%] motion-duration-75">🚀</div>
+      <div class="motion-preset-float">🚀</div>
     </div>
   </body>
 </html>