Merge pull request #831 from framer/feature/framer-tree-animations

Enable framer magic motion transitions
framer · Oct 28, 2020 · dc571a6 · dc571a6
2 parents 2b82149 + 8b26eaa
commit dc571a6
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 2 deletions.
diff --git a/api/framer-motion.api.md b/api/framer-motion.api.md
@@ -260,6 +260,11 @@ export interface FeatureProps extends MotionProps {
 // @public (undocumented)
 export type ForwardRefComponent<T, P> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
 
+// Warning: (ae-internal-missing-underscore) The name "FramerTreeContext" should be prefixed with an underscore because the declaration is marked as @internal
+// 
+// @internal (undocumented)
+export const FramerTreeContext: import("react").Context<SyncLayoutBatcher | SharedLayoutSyncMethods>;
+
 // @public (undocumented)
 export type GestureHandlers = PanHandlers & TapHandlers & HoverHandlers;
 

diff --git a/src/components/AnimateSharedLayout/SharedLayoutContext.ts b/src/components/AnimateSharedLayout/SharedLayoutContext.ts
@@ -97,3 +97,10 @@ export function isSharedLayout(
 export const SharedLayoutContext = createContext<
     SyncLayoutBatcher | SharedLayoutSyncMethods
 >(createBatcher())
+
+/**
+ * @internal
+ */
+export const FramerTreeLayoutContext = createContext<
+    SyncLayoutBatcher | SharedLayoutSyncMethods
+>(createBatcher())
diff --git a/src/index.ts b/src/index.ts
@@ -139,6 +139,7 @@ export {
 export {
     SharedLayoutSyncMethods,
     SharedLayoutContext,
+    FramerTreeLayoutContext,
     SyncLayoutLifecycles,
     createBatcher,
 } from "./components/AnimateSharedLayout/SharedLayoutContext"

diff --git a/src/motion/features/layout/Measure.tsx b/src/motion/features/layout/Measure.tsx
@@ -6,10 +6,12 @@ import {
     SharedLayoutSyncMethods,
     isSharedLayout,
     SharedLayoutContext,
+    FramerTreeLayoutContext,
 } from "../../../components/AnimateSharedLayout/SharedLayoutContext"
 
 interface SyncProps extends FeatureProps {
     syncLayout: SharedLayoutSyncMethods | SyncLayoutBatcher
+    framerSyncLayout: SharedLayoutSyncMethods | SyncLayoutBatcher
 }
 
 /**
@@ -20,8 +22,10 @@ class Measure extends React.Component<SyncProps> {
      * If this is a child of a SyncContext, register the VisualElement with it on mount.
      */
     componentDidMount() {
-        const { syncLayout, visualElement } = this.props
+        const { syncLayout, framerSyncLayout, visualElement } = this.props
         isSharedLayout(syncLayout) && syncLayout.register(visualElement)
+        isSharedLayout(framerSyncLayout) &&
+            framerSyncLayout.register(visualElement)
     }
 
     /**
@@ -62,7 +66,14 @@ class Measure extends React.Component<SyncProps> {
 
 function MeasureContextProvider(props: FeatureProps) {
     const syncLayout = useContext(SharedLayoutContext)
-    return <Measure {...props} syncLayout={syncLayout} />
+    const framerSyncLayout = useContext(FramerTreeLayoutContext)
+    return (
+        <Measure
+            {...props}
+            syncLayout={syncLayout}
+            framerSyncLayout={framerSyncLayout}
+        />
+    )
 }
 
 export const MeasureLayout: MotionFeature = {

diff --git a/src/motion/features/layout/use-snapshot-on-unmount.ts b/src/motion/features/layout/use-snapshot-on-unmount.ts
@@ -2,18 +2,24 @@ import { VisualElement } from "../../../render/VisualElement"
 import { useContext } from "react"
 import {
     SharedLayoutContext,
+    FramerTreeLayoutContext,
     isSharedLayout,
 } from "../../../components/AnimateSharedLayout/SharedLayoutContext"
 import { useIsomorphicLayoutEffect } from "../../../utils/use-isomorphic-effect"
 
 export function useSnapshotOnUnmount(visualElement: VisualElement) {
     const syncLayout = useContext(SharedLayoutContext)
+    const framerSyncLayout = useContext(FramerTreeLayoutContext)
 
     useIsomorphicLayoutEffect(
         () => () => {
             if (isSharedLayout(syncLayout)) {
                 syncLayout.remove(visualElement as any)
             }
+
+            if (isSharedLayout(framerSyncLayout)) {
+                framerSyncLayout.remove(visualElement as any)
+            }
         },
         []
     )