From 0743f67d67e287f25ed17c574da801a067a4781b Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Wed, 15 Feb 2023 10:03:27 +0100 Subject: [PATCH] Latest changes --- packages/framer-motion/package.json | 10 +++--- .../node/__tests__/TestProjectionNode.ts | 3 +- .../projection/node/create-projection-node.ts | 33 +++++++++++-------- .../src/projection/node/group.ts | 7 ++-- .../src/projection/shared/stack.ts | 12 +++++-- .../framer-motion/src/render/VisualElement.ts | 4 ++- 6 files changed, 43 insertions(+), 26 deletions(-) diff --git a/packages/framer-motion/package.json b/packages/framer-motion/package.json index 366435a645..f20c456a8b 100644 --- a/packages/framer-motion/package.json +++ b/packages/framer-motion/package.json @@ -72,7 +72,7 @@ "bundlesize": [ { "path": "./dist/size-rollup-motion.js", - "maxSize": "29.82 kB" + "maxSize": "29.75 kB" }, { "path": "./dist/size-rollup-m.js", @@ -80,11 +80,11 @@ }, { "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", @@ -92,11 +92,11 @@ }, { "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 index f51497ffe7..daad9bb421 100644 --- 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({ 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 index 295467a97f..0c209090fb 100644 --- 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({ 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({ * 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({ 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({ 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({ 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 index cf89d2686c..c7caa66e60 100644 --- 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 index b0c44ff9bb..1345105ade 100644 --- 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 index 9b5bb9b41b..5781ef7acb 100644 --- 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 }