Latest changes

motiondivision · Feb 15, 2023 · 0743f67 · 0743f67
1 parent 44e238a
commit 0743f67
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 26 deletions.
diff --git a/packages/framer-motion/package.json b/packages/framer-motion/package.json
@@ -72,31 +72,31 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "29.82 kB"
+            "maxSize": "29.75 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
             "maxSize": "4.68 kB"
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "14.83 kB"
+            "maxSize": "14.82 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "25.56 kB"
+            "maxSize": "25.47 kB"
         },
         {
             "path": "./dist/size-webpack-m.js",
             "maxSize": "4.8 kB"
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "18.85 kB"
+            "maxSize": "18.84 kB"
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "30.45 kB"
+            "maxSize": "30.37 kB"
         }
     ],
     "gitHead": "ee87da357b48f83024e97e581157a5d6f620ce30"

diff --git a/packages/framer-motion/src/projection/node/__tests__/TestProjectionNode.ts b/packages/framer-motion/src/projection/node/__tests__/TestProjectionNode.ts
@@ -23,7 +23,8 @@ export const TestProjectionNode = createProjectionNode<TestInstance>({
 
         return rootNode
     },
-    resetTransform: (instance) => instance.resetTransform?.(),
+    resetTransform: (instance) =>
+        instance.resetTransform ? instance.resetTransform() : undefined,
     checkIsScrollRoot: () => false,
 })
 

diff --git a/packages/framer-motion/src/projection/node/create-projection-node.ts b/packages/framer-motion/src/projection/node/create-projection-node.ts
@@ -765,12 +765,14 @@ export function createProjectionNode<I>({
             const hasProjection =
                 this.projectionDelta && !isDeltaZero(this.projectionDelta)
 
-            const transformTemplateValue = this.getTransformTemplate()?.(
-                this.latestValues,
-                ""
-            )
+            const transformTemplate = this.getTransformTemplate()
+            const transformTemplateValue = transformTemplate
+                ? transformTemplate(this.latestValues, "")
+                : undefined
+
             const transformTemplateHasChanged =
                 transformTemplateValue !== this.prevTransformTemplateValue
+
             if (
                 isResetRequested &&
                 (hasProjection ||
@@ -1129,7 +1131,7 @@ export function createProjectionNode<I>({
              * delete our target sources for the following frame.
              */
             this.isTreeAnimating = Boolean(
-                this.parent?.isTreeAnimating ||
+                (this.parent && this.parent.isTreeAnimating) ||
                     this.currentAnimation ||
                     this.pendingAnimation
             )
@@ -1252,9 +1254,11 @@ export function createProjectionNode<I>({
 
             const relativeLayout = createBox()
 
-            const isSharedLayoutAnimation =
-                snapshot?.source !== this.layout?.source
-            const isOnlyMember = (this.getStack()?.members.length || 0) <= 1
+            const snapshotSource = snapshot ? snapshot.source : undefined
+            const layoutSource = this.layout ? this.layout.source : undefined
+            const isSharedLayoutAnimation = snapshotSource !== layoutSource
+            const stack = this.getStack()
+            const isOnlyMember = !stack || stack.members.length <= 1
             const shouldCrossfadeOpacity = Boolean(
                 isSharedLayoutAnimation &&
                     !isOnlyMember &&
@@ -1316,8 +1320,8 @@ export function createProjectionNode<I>({
             this.notifyListeners("animationStart")
 
             this.currentAnimation && this.currentAnimation.stop()
-            if (this.resumingFrom) {
-                this.resumingFrom.currentAnimation?.stop()
+            if (this.resumingFrom && this.resumingFrom.currentAnimation) {
+                this.resumingFrom.currentAnimation.stop()
             }
             if (this.pendingAnimation) {
                 cancelSync.update(this.pendingAnimation)
@@ -1444,12 +1448,13 @@ export function createProjectionNode<I>({
             const stack = this.sharedNodes.get(layoutId)!
             stack.add(node)
 
+            const config = node.options.initialPromotionConfig
             node.promote({
-                transition: node.options.initialPromotionConfig?.transition,
+                transition: config ? config.transition : undefined,
                 preserveFollowOpacity:
-                    node.options.initialPromotionConfig?.shouldPreserveFollowOpacity?.(
-                        node
-                    ),
+                    config && config.shouldPreserveFollowOpacity
+                        ? config.shouldPreserveFollowOpacity(node)
+                        : undefined,
             })
         }
 

diff --git a/packages/framer-motion/src/projection/node/group.ts b/packages/framer-motion/src/projection/node/group.ts
@@ -25,8 +25,11 @@ export function nodeGroup(): NodeGroup {
         },
         remove: (node) => {
             nodes.delete(node)
-            subscriptions.get(node)?.()
-            subscriptions.delete(node)
+            const unsubscribe = subscriptions.get(node)
+            if (unsubscribe) {
+                unsubscribe()
+                subscriptions.delete(node)
+            }
             dirtyAll()
         },
         dirty: dirtyAll,

diff --git a/packages/framer-motion/src/projection/shared/stack.ts b/packages/framer-motion/src/projection/shared/stack.ts
@@ -73,7 +73,7 @@ export class NodeStack {
                     prevLead.animationValues || prevLead.latestValues
             }
 
-            if (node.root?.isUpdating) {
+            if (node.root && node.root.isUpdating) {
                 node.isLayoutDirty = true
             }
 
@@ -99,8 +99,14 @@ export class NodeStack {
 
     exitAnimationComplete() {
         this.members.forEach((node) => {
-            node.options.onExitComplete?.()
-            node.resumingFrom?.options.onExitComplete?.()
+            const { options, resumingFrom } = node
+
+            options.onExitComplete && options.onExitComplete()
+
+            if (resumingFrom) {
+                resumingFrom.options.onExitComplete &&
+                    resumingFrom.options.onExitComplete()
+            }
         })
     }
 

diff --git a/packages/framer-motion/src/render/VisualElement.ts b/packages/framer-motion/src/render/VisualElement.ts
@@ -721,7 +721,9 @@ export abstract class VisualElement<
         }
 
         if (!this.isControllingVariants) {
-            const context = this.parent?.getVariantContext() || {}
+            const context = this.parent
+                ? this.parent.getVariantContext() || {}
+                : {}
             if (this.props.initial !== undefined) {
                 context.initial = this.props.initial as any
             }