fix: animation behaviour

src/components/ProgressBar/ProgressBar.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw ProgressBar [v0.0.0]
+// Tremor Raw ProgressBar [v0.0.1]
 
 import React from "react"
 import { tv, type VariantProps } from "tailwind-variants"
@@ -79,10 +79,14 @@ const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(
           aria-valuemax={max}
         >
           <div
-            className={cx("h-full flex-col rounded-full", bar())}
+            className={cx(
+              "h-full flex-col rounded-full",
+              bar(),
+              showAnimation &&
+                "transform-gpu transition-all duration-300 ease-in-out",
+            )}
             style={{
               width: max ? `${(safeValue / max) * 100}%` : `${safeValue}%`,
-              transition: showAnimation ? "all 1s" : "",
             }}
           />
         </div>

src/components/ProgressBar/changelog.md

@@ -1,5 +1,7 @@
 # Tremor Raw ProgressBar Changelog
 
-## 0.0.0
+## 0.0.1
 
 ### Changes
+
+- Fix: Animation behaviour

src/components/ProgressCircle/ProgressCircle.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw ProgressCircle [v0.0.0]
+// Tremor Raw ProgressCircle [v0.0.1]
 
 import React from "react"
 import { tv, VariantProps } from "tailwind-variants"
@@ -113,7 +113,8 @@ const ProgressCircle = React.forwardRef<SVGSVGElement, ProgressCircleProps>(
                 className={cx(
                   "transition-colors ease-linear",
                   circle(),
-                  showAnimation && "transition-all duration-300 ease-in-out",
+                  showAnimation &&
+                    "transform-gpu transition-all duration-300 ease-in-out",
                 )}
               />
             ) : null}

src/components/ProgressCircle/changelog.md

@@ -1,5 +1,7 @@
 # Tremor Raw ProgressCircle Changelog
 
-## 0.0.0
+## 0.0.1
 
 ### Changes
+
+- Fix: Animation behaviour