fix opacity loop to work with css var

romboHQ · Nov 15, 2024 · 09ceaec · 09ceaec
1 parent 22a3dca
commit 09ceaec
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-motion",
-  "version": "0.4.2-beta",
+  "version": "0.4.3-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",

diff --git a/src/baseAnimations.js b/src/baseAnimations.js
@@ -350,7 +350,7 @@ export function addBaseAnimations(matchUtilities, theme) {
     {
       "motion-opacity-loop": (value, { modifier }) => ({
         // we need to subtract 1 because of animation composition
-        "--motion-loop-opacity": `${Number(value) - 1}`,
+        "--motion-loop-opacity": `calc(${value} - 1)`,
         "--motion-opacity-loop-animation": opacityLoopAnimation(
           modifier || "mirror"
         ),

diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
@@ -6,6 +6,11 @@
   <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>
+    <h1
+      class="motion-opacity-loop-[--ey] motion-scale-loop-[--motion-loop-scale]"
+      style={{ "--ey": "0", "--motion-loop-scale": "0.9" }}
+    >
+      Rombo
+    </h1>
   </body>
 </html>