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