Latest

dev/react/src/examples/Animation-animate.tsx

@@ -1,66 +1,11 @@
-import { useEffect, useState } from "react"
-import { motion, motionValue, useAnimate } from "framer-motion"
-import { frame } from "framer-motion"
-
-/**
- * An example of the tween transition type
- */
+import { motion } from "framer-motion"
 
 const style = {
     width: 100,
     height: 100,
     background: "white",
 }
 
-const Child = ({ setState }: any) => {
-    const [width] = useState(100)
-    const [target, setTarget] = useState(0)
-    const transition = {
-        duration: 10,
-    }
-
-    const [scope, animate] = useAnimate()
-
-    useEffect(() => {
-        const controls = animate([
-            [
-                "div",
-                { x: 500, opacity: 0 },
-                { type: "spring", duration: 1, bounce: 0 },
-            ],
-        ])
-
-        // controls.then(() => {
-        //     controls.play()
-        // })
-
-        return () => controls.stop()
-    }, [target])
-
-    return (
-        <div ref={scope}>
-            <motion.div
-                id="box"
-                style={{
-                    x: target,
-                    ...style,
-                    width: motionValue(width),
-                    y: width / 10,
-                }}
-                onClick={() => {
-                    setTarget(target + 100)
-                    // setWidth(width + 100)
-                }}
-                initial={{ borderRadius: 10 }}
-            />
-            {/* <div style={style} onClick={() => setState(false)} /> */}
-        </div>
-    )
-    return
-}
-
 export const App = () => {
-    const [state, setState] = useState(true)
-
-    return state && <Child setState={setState} />
+    return <motion.div animate={{ x: 100 }} style={style} />
 }

dev/react/src/examples/Animation-use-animate.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react"
+import { motion, motionValue, useAnimate } from "framer-motion"
+import { frame } from "framer-motion"
+
+/**
+ * An example of the tween transition type
+ */
+
+const style = {
+    width: 100,
+    height: 100,
+    background: "white",
+}
+
+const Child = ({ setState }: any) => {
+    const [width] = useState(100)
+    const [target, setTarget] = useState(0)
+    const transition = {
+        duration: 10,
+    }
+
+    const [scope, animate] = useAnimate()
+
+    useEffect(() => {
+        const controls = animate([
+            [
+                "div",
+                { x: 500, opacity: 0 },
+                { type: "spring", duration: 1, bounce: 0 },
+            ],
+        ])
+
+        controls.then(() => {
+            controls.play()
+        })
+
+        return () => controls.stop()
+    }, [target])
+
+    return (
+        <div ref={scope}>
+            <motion.div
+                id="box"
+                style={{
+                    x: target,
+                    ...style,
+                    width: motionValue(width),
+                    y: width / 10,
+                }}
+                onClick={() => {
+                    setTarget(target + 100)
+                    // setWidth(width + 100)
+                }}
+                initial={{ borderRadius: 10 }}
+            />
+            {/* <div style={style} onClick={() => setState(false)} /> */}
+        </div>
+    )
+    return
+}
+
+export const App = () => {
+    const [state, setState] = useState(true)
+
+    return state && <Child setState={setState} />
+}

packages/framer-motion/src/frameloop/batcher.ts

@@ -45,6 +45,7 @@ export function createRenderBatcher(
             ? 1000 / 60
             : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1)
 
+        console.log("processing", allowKeepAlive)
         state.timestamp = timestamp
         state.isProcessing = true
         stepsOrder.forEach(processStep)
@@ -59,14 +60,15 @@ export function createRenderBatcher(
     const wake = () => {
         runNextFrame = true
         useDefaultElapsed = true
-
+        console.log("wake", scheduleNextBatch)
         if (!state.isProcessing) {
             scheduleNextBatch(processBatch)
         }
     }
 
     const schedule = stepsOrder.reduce((acc, key) => {
         const step = steps[key]
+        console.log("scheduling", key)
         acc[key] = (process: Process, keepAlive = false, immediate = false) => {
             if (!runNextFrame) wake()
 

packages/framer-motion/src/motion/features/animation/exit.ts

@@ -5,6 +5,14 @@ let id = 0
 export class ExitAnimationFeature extends Feature<unknown> {
     private id: number = id++
 
+    mount() {
+        const { register } = this.node.presenceContext || {}
+
+        if (register) {
+            this.unmount = register(this.id)
+        }
+    }
+
     update() {
         if (!this.node.presenceContext) return
 
@@ -25,13 +33,5 @@ export class ExitAnimationFeature extends Feature<unknown> {
         }
     }
 
-    mount() {
-        const { register } = this.node.presenceContext || {}
-
-        if (register) {
-            this.unmount = register(this.id)
-        }
-    }
-
     unmount() {}
 }

packages/framer-motion/src/motion/features/animation/index.ts

@@ -11,6 +11,7 @@ export class AnimationFeature extends Feature<unknown> {
      */
     constructor(node: VisualElement) {
         super(node)
+        console.log("creating animation feature")
         node.animationState ||= createAnimationState(node)
     }
 
@@ -37,5 +38,7 @@ export class AnimationFeature extends Feature<unknown> {
         }
     }
 
-    unmount() {}
+    unmount() {
+        this.node.animationState = undefined
+    }
 }

packages/framer-motion/src/motion/utils/use-visual-element.ts

@@ -86,6 +86,7 @@ export function useVisualElement<Instance, RenderState>(
         visualElement.updateFeatures()
 
         if (!wantsHandoff.current && visualElement.animationState) {
+            console.log("animateChanges")
             visualElement.animationState.animateChanges()
         }
 

packages/framer-motion/src/render/VisualElement.ts

@@ -427,6 +427,7 @@ export abstract class VisualElement<
     }
 
     mount(instance: Instance) {
+        console.log("mount")
         this.current = instance
 
         visualElementStore.set(instance, this)
@@ -464,6 +465,7 @@ export abstract class VisualElement<
     }
 
     unmount() {
+        console.log("unmount")
         visualElementStore.delete(this.current)
         this.projection && this.projection.unmount()
         cancelFrame(this.notifyUpdate)
@@ -477,6 +479,7 @@ export abstract class VisualElement<
         }
         for (const key in this.features) {
             this.features[key as keyof typeof this.features]?.unmount()
+            delete this.features[key as keyof typeof this.features]
         }
         this.current = null
     }