Featherweight API (#2814)

* Adding support for linear easing * Fixing tests * Renaming animateStyle to startWaapiAnimation * Adding entrypoints: * adding native animator * Removing spring from sequence bundle * Fixing comment * Adding polyfill and test * Adding test * Latest tests * Latest tests * Updating easing * Latest * Latest * Adding tests * Latest * Updating entry names * Latest filesize improvements * fixing * Laetst * Fixing test * Latest
motiondivision · Sep 27, 2024 · c3d7fd4 · c3d7fd4
1 parent b544cce
commit c3d7fd4
Show file tree

Hide file tree

Showing 106 changed files with 5,171 additions and 481 deletions.
diff --git a/dev/html/public/optimized-appear/defer-handoff-block.html b/dev/html/public/optimized-appear/defer-handoff-block.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

diff --git a/dev/html/public/optimized-appear/defer-handoff-external-values.html b/dev/html/public/optimized-appear/defer-handoff-external-values.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-ancestor-suspend.html b/dev/html/public/optimized-appear/defer-handoff-layout-ancestor-suspend.html
@@ -35,7 +35,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-ancestor.html b/dev/html/public/optimized-appear/defer-handoff-layout-ancestor.html
@@ -35,7 +35,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-child.html b/dev/html/public/optimized-appear/defer-handoff-layout-child.html
@@ -35,7 +35,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-opacity.html b/dev/html/public/optimized-appear/defer-handoff-layout-opacity.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-sibling-transform.html b/dev/html/public/optimized-appear/defer-handoff-layout-sibling-transform.html
@@ -35,7 +35,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-sibling.html b/dev/html/public/optimized-appear/defer-handoff-layout-sibling.html
@@ -35,7 +35,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-useeffect.html b/dev/html/public/optimized-appear/defer-handoff-layout-useeffect.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout-uselayouteffect.html b/dev/html/public/optimized-appear/defer-handoff-layout-uselayouteffect.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

diff --git a/dev/html/public/optimized-appear/defer-handoff-layout.html b/dev/html/public/optimized-appear/defer-handoff-layout.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

diff --git a/dev/html/public/optimized-appear/defer-handoff.html b/dev/html/public/optimized-appear/defer-handoff.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

diff --git a/dev/html/public/optimized-appear/interrupt-delay-after.html b/dev/html/public/optimized-appear/interrupt-delay-after.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

diff --git a/dev/html/public/optimized-appear/interrupt-delay-before-accelerated.html b/dev/html/public/optimized-appear/interrupt-delay-before-accelerated.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

diff --git a/dev/html/public/optimized-appear/interrupt-delay-before.html b/dev/html/public/optimized-appear/interrupt-delay-before.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

diff --git a/dev/html/public/optimized-appear/interrupt-spring.html b/dev/html/public/optimized-appear/interrupt-spring.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

diff --git a/dev/html/public/optimized-appear/interrupt-tween-opacity-waapi.html b/dev/html/public/optimized-appear/interrupt-tween-opacity-waapi.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

diff --git a/dev/html/public/optimized-appear/interrupt-tween-opacity.html b/dev/html/public/optimized-appear/interrupt-tween-opacity.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

diff --git a/dev/html/public/optimized-appear/interrupt-tween-transforms.html b/dev/html/public/optimized-appear/interrupt-tween-transforms.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

diff --git a/dev/html/public/optimized-appear/interrupt-tween-x.html b/dev/html/public/optimized-appear/interrupt-tween-x.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

diff --git a/dev/html/public/optimized-appear/persist-optimised-animation.html b/dev/html/public/optimized-appear/persist-optimised-animation.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

diff --git a/dev/html/public/optimized-appear/persist.html b/dev/html/public/optimized-appear/persist.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

diff --git a/dev/html/public/optimized-appear/portal.html b/dev/html/public/optimized-appear/portal.html
@@ -27,7 +27,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

diff --git a/dev/html/public/optimized-appear/resync-delay.html b/dev/html/public/optimized-appear/resync-delay.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

diff --git a/dev/html/public/optimized-appear/resync.html b/dev/html/public/optimized-appear/resync.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

diff --git a/dev/html/public/optimized-appear/start-after-hydration.html b/dev/html/public/optimized-appear/start-after-hydration.html
@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

diff --git a/dev/react/src/tests/animate-style-autoplay.tsx b/dev/react/src/tests/animate-style-autoplay.tsx
@@ -0,0 +1,26 @@
+import { animateMini } from "framer-motion/dom"
+import { useRef, useEffect } from "react"
+
+export const App = () => {
+    const ref = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (!ref.current) return
+
+        const animation = animateMini(
+            ref.current,
+            { width: 200 },
+            { duration: 0.1, autoplay: false }
+        )
+
+        return () => animation.cancel()
+    }, [])
+
+    return <div id="box" ref={ref} style={style} />
+}
+
+const style = {
+    width: 100,
+    height: 100,
+    backgroundColor: "#fff",
+}
diff --git a/dev/react/src/tests/animate-style-complete.tsx b/dev/react/src/tests/animate-style-complete.tsx
@@ -0,0 +1,28 @@
+import { animateMini } from "framer-motion/dom"
+import { useRef, useEffect } from "react"
+
+export const App = () => {
+    const ref = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (!ref.current) return
+
+        const animation = animateMini(
+            ref.current,
+            { width: 200 },
+            { duration: 20 }
+        )
+
+        animation.complete()
+
+        return () => animation.cancel()
+    }, [])
+
+    return <div id="box" ref={ref} style={style} />
+}
+
+const style = {
+    width: 100,
+    height: 100,
+    backgroundColor: "#fff",
+}
diff --git a/dev/react/src/tests/animate-style-duration.tsx b/dev/react/src/tests/animate-style-duration.tsx
@@ -0,0 +1,51 @@
+import { spring } from "framer-motion"
+import { animate } from "framer-motion/dom/mini"
+import { useRef, useEffect } from "react"
+
+export const App = () => {
+    const ref = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (!ref.current) return
+
+        ref.current.style.backgroundColor = "red"
+
+        let animation = animate(
+            ref.current,
+            { width: [null, 200] },
+            { duration: 0.1 }
+        )
+
+        if (animation.duration === 0.1) {
+            animation = animate(ref.current, { width: [null, 200] }, {})
+
+            if (animation.duration === 0.3) {
+                animation = animate(
+                    ref.current,
+                    { width: [null, 200] },
+                    { type: spring }
+                )
+
+                if (animation.duration === 1.06) {
+                    ref.current.style.backgroundColor = "green"
+                }
+            }
+        }
+
+        return () => {
+            animation.cancel()
+        }
+    }, [])
+
+    return (
+        <div id="box" ref={ref} style={style}>
+            content
+        </div>
+    )
+}
+
+const style = {
+    width: 100,
+    height: 100,
+    backgroundColor: "#fff",
+}
diff --git a/dev/react/src/tests/animate-style-interrupt.tsx b/dev/react/src/tests/animate-style-interrupt.tsx
@@ -0,0 +1,38 @@
+import { animateMini } from "framer-motion/dom"
+import { useRef, useEffect } from "react"
+
+export const App = () => {
+    const ref = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (!ref.current) return
+
+        const animation = animateMini(
+            ref.current,
+            { width: 200 },
+            { duration: 2 }
+        )
+
+        const timer = setTimeout(() => {
+            if (!ref.current) return
+            animateMini(ref.current, { width: 100 }, { duration: 0.5 })
+        }, 1000)
+
+        return () => {
+            animation.cancel()
+            clearTimeout(timer)
+        }
+    }, [])
+
+    return (
+        <div id="box" ref={ref} style={style}>
+            content
+        </div>
+    )
+}
+
+const style = {
+    width: 100,
+    height: 100,
+    backgroundColor: "#fff",
+}
diff --git a/dev/react/src/tests/animate-style-pause.tsx b/dev/react/src/tests/animate-style-pause.tsx
@@ -0,0 +1,32 @@
+import { animateMini } from "framer-motion/dom"
+import { useRef, useEffect } from "react"
+
+export const App = () => {
+    const ref = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (!ref.current) return
+
+        const animation = animateMini(
+            ref.current,
+            { width: 200 },
+            { duration: 0.2 }
+        )
+
+        setTimeout(() => {
+            animation.pause()
+        }, 100)
+
+        animation.pause()
+
+        return () => animation.cancel()
+    }, [])
+
+    return <div id="box" ref={ref} style={style} />
+}
+
+const style = {
+    width: 100,
+    height: 100,
+    backgroundColor: "#fff",
+}