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

Author: mattgperry

dev/html/public/optimized-appear/defer-handoff-block.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

dev/html/public/optimized-appear/defer-handoff-external-values.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

dev/html/public/optimized-appear/defer-handoff-layout-ancestor-suspend.html

@@ -35,7 +35,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

dev/html/public/optimized-appear/defer-handoff-layout-ancestor.html

@@ -35,7 +35,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

dev/html/public/optimized-appear/defer-handoff-layout-child.html

@@ -35,7 +35,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

dev/html/public/optimized-appear/defer-handoff-layout-opacity.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

dev/html/public/optimized-appear/defer-handoff-layout-sibling-transform.html

@@ -35,7 +35,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

dev/html/public/optimized-appear/defer-handoff-layout-sibling.html

@@ -35,7 +35,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

dev/html/public/optimized-appear/defer-handoff-layout-useeffect.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

dev/html/public/optimized-appear/defer-handoff-layout-uselayouteffect.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

dev/html/public/optimized-appear/defer-handoff-layout.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

dev/html/public/optimized-appear/defer-handoff.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

dev/html/public/optimized-appear/interrupt-delay-after.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

dev/html/public/optimized-appear/interrupt-delay-before-accelerated.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

dev/html/public/optimized-appear/interrupt-delay-before.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

dev/html/public/optimized-appear/interrupt-spring.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

dev/html/public/optimized-appear/interrupt-tween-opacity-waapi.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

dev/html/public/optimized-appear/interrupt-tween-opacity.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

dev/html/public/optimized-appear/interrupt-tween-transforms.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

dev/html/public/optimized-appear/interrupt-tween-x.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

dev/html/public/optimized-appear/persist-optimised-animation.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 animate,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,

dev/html/public/optimized-appear/persist.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

dev/html/public/optimized-appear/portal.html

@@ -27,7 +27,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

dev/html/public/optimized-appear/resync-delay.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

dev/html/public/optimized-appear/resync.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

dev/html/public/optimized-appear/start-after-hydration.html

@@ -26,7 +26,6 @@
         <script type="module">
             const {
                 motion,
-                animateStyle,
                 startOptimizedAppearAnimation,
                 optimizedAppearDataAttribute,
                 motionValue,

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",
+}

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",
+}

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",
+}

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",
+}

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",
+}