fix opacity loop not working together with other loops

KevinGrajeda · KevinGrajeda · commit 39851d777d42 · 2024-11-15T12:27:40.000-06:00
diff --git a/src/baseAnimations.js b/src/baseAnimations.js
@@ -349,11 +349,12 @@ export function addBaseAnimations(matchUtilities, theme) {
   matchUtilities(
     {
       "motion-opacity-loop": (value, { modifier }) => ({
-        "--motion-loop-opacity": value,
+        // we need to subtract 1 because of animation composition
+        "--motion-loop-opacity": `${Number(value) - 1}`,
         "--motion-opacity-loop-animation": opacityLoopAnimation(
           modifier || "mirror"
         ),
-        // no animation composition because it makes opacity not work
+        animationComposition: "accumulate",
         animation: "var(--motion-all-loop-and-enter-animations)",
       }),
     },
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
@@ -3,11 +3,9 @@
     <title>Tailwind motion</title>
     <meta charset="utf-8" />
   </head>
-  <body>
-    <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-preset-float">🚀</div>
-    </div>
+  <body
+    class="bg-black flex justify-center items-center text-white text-9xl h-screen"
+  >
+    <h1 class="motion-opacity-loop-0 motion-scale-loop-50">Rombo</h1>
   </body>
 </html>
