Updating

Author: mattgperry

packages/framer-motion/src/animation/interfaces/types.ts

@@ -5,5 +5,5 @@ export type VisualElementAnimationOptions = {
     delay?: number
     transitionOverride?: Transition
     custom?: any
-    type?: AnimationType
+    type?: AnimationType | "initial"
 }

packages/framer-motion/src/motion/__tests__/transition-from.test.tsx

@@ -120,4 +120,46 @@ describe("transitionFrom", () => {
 
         return expect(promise).resolves.toEqual([0.5, 0, 0.5])
     })
+
+    test("transitionFrom works with gestures and initial", async () => {
+        return new Promise<void>((resolve) => {
+            const Component = () => (
+                <motion.div
+                    whileHover={{
+                        opacity: 0,
+                        transitionFrom: {
+                            initial: { type: false },
+                        },
+                    }}
+                    initial={{
+                        transitionFrom: {
+                            initial: { type: false },
+                            whileHover: { type: false },
+                        },
+                    }}
+                    style={{ opacity: 0.5 }}
+                />
+            )
+
+            const { container, rerender } = render(<Component />)
+            rerender(<Component />)
+
+            expect(container.firstChild).toHaveStyle("opacity: 0.5")
+
+            pointerEnter(container.firstChild as Element)
+
+            frame.postRender(() => {
+                expect(container.firstChild).toHaveStyle("opacity: 0")
+
+                setTimeout(() => {
+                    pointerLeave(container.firstChild as Element)
+
+                    frame.postRender(() => {
+                        expect(container.firstChild).toHaveStyle("opacity: 0.5")
+                        resolve()
+                    })
+                }, 10)
+            })
+        })
+    })
 })

packages/framer-motion/src/motion/types.ts

@@ -142,7 +142,7 @@ export interface AnimationProps {
      * <motion.div initial={false} animate={{ opacity: 0 }} />
      * ```
      */
-    initial?: boolean | Target | VariantLabels
+    initial?: boolean | TargetAndTransition | VariantLabels
 
     /**
      * Values to animate to, variant label(s), or `AnimationControls`.

packages/framer-motion/src/render/utils/animation-state.ts

@@ -128,7 +128,7 @@ export function createAnimationState(
          * lower priority props and flag for animation.
          */
         for (let i = 0; i < numAnimationTypes; i++) {
-            const type = reversePriorityOrder[i]
+            const type: AnimationType | "initial" = reversePriorityOrder[i]
             const typeState = state[type]
             const prop = props[type] !== undefined ? props[type] : context[type]
             const propIsVariant = isVariantLabel(prop)
@@ -325,16 +325,29 @@ export function createAnimationState(
          * defined in the style prop, or the last read value.
          */
         if (removedKeys.size) {
-            const fallbackAnimation = {}
+            const fallbackAnimation: TargetAndTransition = {}
             removedKeys.forEach((key) => {
                 const fallbackTarget = visualElement.getBaseTarget(key)
 
                 if (fallbackTarget !== undefined) {
                     fallbackAnimation[key] = fallbackTarget
                 }
             })
+            const { initial } = props
+            if (initial && typeof initial !== "boolean") {
+                const { transition, transitionFrom } =
+                    resolveVariant(
+                        visualElement,
+                        Array.isArray(initial) ? initial[0] : initial
+                    ) || {}
+                fallbackAnimation.transition = transition
+                fallbackAnimation.transitionFrom = transitionFrom
+            }
 
-            animations.push({ animation: fallbackAnimation })
+            animations.push({
+                animation: fallbackAnimation,
+                options: { type: "initial" },
+            })
         }
 
         let shouldAnimate = Boolean(animations.length)

packages/framer-motion/src/value/index.ts

@@ -68,7 +68,7 @@ export class MotionValue<V = any> {
     /**
      * The type of animation responsible for the MotionValue's current state.
      */
-    type?: AnimationType
+    type?: AnimationType | "initial"
 
     /**
      * If a MotionValue has an owner, it was created internally within Framer Motion