Updating stress test

motiondivision · Dec 15, 2023 · fb5e985 · fb5e985
1 parent b50e1a7
commit fb5e985
Showing 1 changed file with 21 additions and 2 deletions.
diff --git a/dev/examples/Animation-stress-mount.tsx b/dev/examples/Animation-stress-mount.tsx
@@ -5,25 +5,44 @@ import { motion } from "framer-motion"
  * An example of the tween transition type
  *
  * Effect time at 6x speed, ~120ms
+ * Lower bound when no animations successfully fire - 9ms
  */
 
 const style = {
     width: 100,
     height: 100,
     background: "white",
+    "--number": 0,
 }
 const Box = () => {
     return (
         <motion.div
-            animate={{ backgroundColor: "#f00", rotate: 90, opacity: [0, 1] }}
+            animate={{
+                backgroundColor: "var(--color)",
+                rotate: 90,
+                opacity: [0, 1],
+                x: "50%",
+                y: "50%",
+                filter: [null, "blur(1px)"],
+                "--number": 1,
+            }}
+            initial={{ x: 1, y: 0 }}
+            transition={{ duration: 1 }}
             style={style}
         />
     )
 }
 
 export const App = () => {
     return (
-        <div style={{ width: 1000, display: "flex", flexWrap: "wrap" }}>
+        <div
+            style={{
+                width: 1000,
+                display: "flex",
+                flexWrap: "wrap",
+                "--color": "#f00",
+            }}
+        >
             <Box />
             <Box />
             <Box />