fix opacity loop to work with css var

KevinGrajeda · KevinGrajeda · commit 09ceaeca9654 · 2024-11-15T16:36:07.000-06:00
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>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "tailwindcss-motion",`
`3`		`- "version": "0.4.2-beta",`
	`3`	`+ "version": "0.4.3-beta",`
`4`	`4`	`"description": "Tailwind Motion is a Tailwind CSS Plugin made by Rombo. It’s a simple, yet powerful, animation library for Tailwind CSS.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"tailwindcss",`
Original file line number	Diff line number	Diff line change
`@@ -350,7 +350,7 @@ export function addBaseAnimations(matchUtilities, theme) {`
`350`	`350`	`{`
`351`	`351`	`"motion-opacity-loop": (value, { modifier }) => ({`
`352`	`352`	`// we need to subtract 1 because of animation composition`
`353`		- "--motion-loop-opacity": `${Number(value) - 1}`,
	`353`	+ "--motion-loop-opacity": `calc(${value} - 1)`,
`354`	`354`	`"--motion-opacity-loop-animation": opacityLoopAnimation(`
`355`	`355`	`modifier \|\| "mirror"`
`356`	`356`	`),`