framer-motion 7.0.3 → 7.1.2

package/dist/es/projection/node/create-projection-node.mjs

@@ -1,4 +1,3 @@
-import { __spreadArray, __read, __assign } from 'tslib';
 import sync, { cancelSync, flushSync } from 'framesync';
 import { mix } from 'popmotion';
 import { animate } from '../../animation/animate.mjs';
@@ -25,14 +24,10 @@ import { globalProjectionState } from './state.mjs';
  * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
  * which has a noticeable difference in spring animations
  */
-var animationTarget = 1000;
-function createProjectionNode(_a) {
-    var attachResizeListener = _a.attachResizeListener, defaultParent = _a.defaultParent, measureScroll = _a.measureScroll, checkIsScrollRoot = _a.checkIsScrollRoot, resetTransform = _a.resetTransform;
-    return /** @class */ (function () {
-        function ProjectionNode(id, latestValues, parent) {
-            if (latestValues === void 0) { latestValues = {}; }
-            if (parent === void 0) { parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent(); }
-            var _this = this;
+const animationTarget = 1000;
+function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
+    return class ProjectionNode {
+        constructor(id, latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
             /**
              * A Set containing all this component's children. This is used to iterate
              * through the children.
@@ -97,15 +92,15 @@ function createProjectionNode(_a) {
             this.eventHandlers = new Map();
             // Note: Currently only running on root node
             this.potentialNodes = new Map();
-            this.checkUpdateFailed = function () {
-                if (_this.isUpdating) {
-                    _this.isUpdating = false;
-                    _this.clearAllSnapshots();
+            this.checkUpdateFailed = () => {
+                if (this.isUpdating) {
+                    this.isUpdating = false;
+                    this.clearAllSnapshots();
                 }
             };
-            this.updateProjection = function () {
-                _this.nodes.forEach(resolveTargetDelta);
-                _this.nodes.forEach(calcProjection);
+            this.updateProjection = () => {
+                this.nodes.forEach(resolveTargetDelta);
+                this.nodes.forEach(calcProjection);
             };
             this.hasProjected = false;
             this.isVisible = true;
@@ -118,49 +113,43 @@ function createProjectionNode(_a) {
             this.id = id;
             this.latestValues = latestValues;
             this.root = parent ? parent.root || parent : this;
-            this.path = parent ? __spreadArray(__spreadArray([], __read(parent.path), false), [parent], false) : [];
+            this.path = parent ? [...parent.path, parent] : [];
             this.parent = parent;
             this.depth = parent ? parent.depth + 1 : 0;
             id && this.root.registerPotentialNode(id, this);
-            for (var i = 0; i < this.path.length; i++) {
+            for (let i = 0; i < this.path.length; i++) {
                 this.path[i].shouldResetTransform = true;
             }
             if (this.root === this)
                 this.nodes = new FlatTree();
         }
-        ProjectionNode.prototype.addEventListener = function (name, handler) {
+        addEventListener(name, handler) {
             if (!this.eventHandlers.has(name)) {
                 this.eventHandlers.set(name, new SubscriptionManager());
             }
             return this.eventHandlers.get(name).add(handler);
-        };
-        ProjectionNode.prototype.notifyListeners = function (name) {
-            var args = [];
-            for (var _i = 1; _i < arguments.length; _i++) {
-                args[_i - 1] = arguments[_i];
-            }
-            var subscriptionManager = this.eventHandlers.get(name);
-            subscriptionManager === null || subscriptionManager === void 0 ? void 0 : subscriptionManager.notify.apply(subscriptionManager, __spreadArray([], __read(args), false));
-        };
-        ProjectionNode.prototype.hasListeners = function (name) {
+        }
+        notifyListeners(name, ...args) {
+            const subscriptionManager = this.eventHandlers.get(name);
+            subscriptionManager === null || subscriptionManager === void 0 ? void 0 : subscriptionManager.notify(...args);
+        }
+        hasListeners(name) {
             return this.eventHandlers.has(name);
-        };
-        ProjectionNode.prototype.registerPotentialNode = function (id, node) {
+        }
+        registerPotentialNode(id, node) {
             this.potentialNodes.set(id, node);
-        };
+        }
         /**
          * Lifecycles
          */
-        ProjectionNode.prototype.mount = function (instance, isLayoutDirty) {
-            var _this = this;
+        mount(instance, isLayoutDirty = false) {
             var _a;
-            if (isLayoutDirty === void 0) { isLayoutDirty = false; }
             if (this.instance)
                 return;
             this.isSVG =
                 instance instanceof SVGElement && instance.tagName !== "svg";
             this.instance = instance;
-            var _b = this.options, layoutId = _b.layoutId, layout = _b.layout, visualElement = _b.visualElement;
+            const { layoutId, layout, visualElement } = this.options;
             if (visualElement && !visualElement.getInstance()) {
                 visualElement.mount(instance);
             }
@@ -171,17 +160,15 @@ function createProjectionNode(_a) {
                 this.isLayoutDirty = true;
             }
             if (attachResizeListener) {
-                var unblockTimeout_1;
-                var resizeUnblockUpdate_1 = function () {
-                    return (_this.root.updateBlockedByResize = false);
-                };
-                attachResizeListener(instance, function () {
-                    _this.root.updateBlockedByResize = true;
-                    clearTimeout(unblockTimeout_1);
-                    unblockTimeout_1 = window.setTimeout(resizeUnblockUpdate_1, 250);
+                let unblockTimeout;
+                const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false);
+                attachResizeListener(instance, () => {
+                    this.root.updateBlockedByResize = true;
+                    clearTimeout(unblockTimeout);
+                    unblockTimeout = window.setTimeout(resizeUnblockUpdate, 250);
                     if (globalProjectionState.hasAnimatedSinceResize) {
                         globalProjectionState.hasAnimatedSinceResize = false;
-                        _this.nodes.forEach(finishAnimation);
+                        this.nodes.forEach(finishAnimation);
                     }
                 });
             }
@@ -192,45 +179,44 @@ function createProjectionNode(_a) {
             if (this.options.animate !== false &&
                 visualElement &&
                 (layoutId || layout)) {
-                this.addEventListener("didUpdate", function (_a) {
-                    var _b, _c, _d, _e, _f;
-                    var delta = _a.delta, hasLayoutChanged = _a.hasLayoutChanged, hasRelativeTargetChanged = _a.hasRelativeTargetChanged, newLayout = _a.layout;
-                    if (_this.isTreeAnimationBlocked()) {
-                        _this.target = undefined;
-                        _this.relativeTarget = undefined;
+                this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeTargetChanged, layout: newLayout, }) => {
+                    var _a, _b, _c, _d, _e;
+                    if (this.isTreeAnimationBlocked()) {
+                        this.target = undefined;
+                        this.relativeTarget = undefined;
                         return;
                     }
                     // TODO: Check here if an animation exists
-                    var layoutTransition = (_c = (_b = _this.options.transition) !== null && _b !== void 0 ? _b : visualElement.getDefaultTransition()) !== null && _c !== void 0 ? _c : defaultLayoutTransition;
-                    var _g = visualElement.getProps(), onLayoutAnimationStart = _g.onLayoutAnimationStart, onLayoutAnimationComplete = _g.onLayoutAnimationComplete;
+                    const layoutTransition = (_b = (_a = this.options.transition) !== null && _a !== void 0 ? _a : visualElement.getDefaultTransition()) !== null && _b !== void 0 ? _b : defaultLayoutTransition;
+                    const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps();
                     /**
                      * The target layout of the element might stay the same,
                      * but its position relative to its parent has changed.
                      */
-                    var targetChanged = !_this.targetLayout ||
-                        !boxEquals(_this.targetLayout, newLayout) ||
+                    const targetChanged = !this.targetLayout ||
+                        !boxEquals(this.targetLayout, newLayout) ||
                         hasRelativeTargetChanged;
                     /**
                      * If the layout hasn't seemed to have changed, it might be that the
                      * element is visually in the same place in the document but its position
                      * relative to its parent has indeed changed. So here we check for that.
                      */
-                    var hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;
-                    if (((_d = _this.resumeFrom) === null || _d === void 0 ? void 0 : _d.instance) ||
+                    const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;
+                    if (((_c = this.resumeFrom) === null || _c === void 0 ? void 0 : _c.instance) ||
                         hasOnlyRelativeTargetChanged ||
                         (hasLayoutChanged &&
-                            (targetChanged || !_this.currentAnimation))) {
-                        if (_this.resumeFrom) {
-                            _this.resumingFrom = _this.resumeFrom;
-                            _this.resumingFrom.resumingFrom = undefined;
+                            (targetChanged || !this.currentAnimation))) {
+                        if (this.resumeFrom) {
+                            this.resumingFrom = this.resumeFrom;
+                            this.resumingFrom.resumingFrom = undefined;
                         }
-                        _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-                        var animationOptions = __assign(__assign({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
+                        this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
+                        const animationOptions = Object.assign(Object.assign({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
                         if (visualElement.shouldReduceMotion) {
                             animationOptions.delay = 0;
                             animationOptions.type = false;
                         }
-                        _this.startAnimation(animationOptions);
+                        this.startAnimation(animationOptions);
                     }
                     else {
                         /**
@@ -239,16 +225,16 @@ function createProjectionNode(_a) {
                          * that was probably never commited to screen and look like a jumpy box.
                          */
                         if (!hasLayoutChanged &&
-                            _this.animationProgress === 0) {
-                            _this.finishAnimation();
+                            this.animationProgress === 0) {
+                            this.finishAnimation();
                         }
-                        _this.isLead() && ((_f = (_e = _this.options).onExitComplete) === null || _f === void 0 ? void 0 : _f.call(_e));
+                        this.isLead() && ((_e = (_d = this.options).onExitComplete) === null || _e === void 0 ? void 0 : _e.call(_d));
                     }
-                    _this.targetLayout = newLayout;
+                    this.targetLayout = newLayout;
                 });
             }
-        };
-        ProjectionNode.prototype.unmount = function () {
+        }
+        unmount() {
             var _a, _b;
             this.options.layoutId && this.willUpdate();
             this.root.nodes.remove(this);
@@ -256,34 +242,33 @@ function createProjectionNode(_a) {
             (_b = this.parent) === null || _b === void 0 ? void 0 : _b.children.delete(this);
             this.instance = undefined;
             cancelSync.preRender(this.updateProjection);
-        };
+        }
         // only on the root
-        ProjectionNode.prototype.blockUpdate = function () {
+        blockUpdate() {
             this.updateManuallyBlocked = true;
-        };
-        ProjectionNode.prototype.unblockUpdate = function () {
+        }
+        unblockUpdate() {
             this.updateManuallyBlocked = false;
-        };
-        ProjectionNode.prototype.isUpdateBlocked = function () {
+        }
+        isUpdateBlocked() {
             return this.updateManuallyBlocked || this.updateBlockedByResize;
-        };
-        ProjectionNode.prototype.isTreeAnimationBlocked = function () {
+        }
+        isTreeAnimationBlocked() {
             var _a;
             return (this.isAnimationBlocked ||
                 ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isTreeAnimationBlocked()) ||
                 false);
-        };
+        }
         // Note: currently only running on root node
-        ProjectionNode.prototype.startUpdate = function () {
+        startUpdate() {
             var _a;
             if (this.isUpdateBlocked())
                 return;
             this.isUpdating = true;
             (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.forEach(resetRotation);
-        };
-        ProjectionNode.prototype.willUpdate = function (shouldNotifyListeners) {
+        }
+        willUpdate(shouldNotifyListeners = true) {
             var _a, _b, _c;
-            if (shouldNotifyListeners === void 0) { shouldNotifyListeners = true; }
             if (this.root.isUpdateBlocked()) {
                 (_b = (_a = this.options).onExitComplete) === null || _b === void 0 ? void 0 : _b.call(_a);
                 return;
@@ -292,8 +277,8 @@ function createProjectionNode(_a) {
             if (this.isLayoutDirty)
                 return;
             this.isLayoutDirty = true;
-            for (var i = 0; i < this.path.length; i++) {
-                var node = this.path[i];
+            for (let i = 0; i < this.path.length; i++) {
+                const node = this.path[i];
                 node.shouldResetTransform = true;
                 /**
                  * TODO: Check we haven't updated the scroll
@@ -301,17 +286,17 @@ function createProjectionNode(_a) {
                  */
                 node.updateScroll();
             }
-            var _d = this.options, layoutId = _d.layoutId, layout = _d.layout;
+            const { layoutId, layout } = this.options;
             if (layoutId === undefined && !layout)
                 return;
-            var transformTemplate = (_c = this.options.visualElement) === null || _c === void 0 ? void 0 : _c.getProps().transformTemplate;
+            const transformTemplate = (_c = this.options.visualElement) === null || _c === void 0 ? void 0 : _c.getProps().transformTemplate;
             this.prevTransformTemplateValue = transformTemplate === null || transformTemplate === void 0 ? void 0 : transformTemplate(this.latestValues, "");
             this.updateSnapshot();
             shouldNotifyListeners && this.notifyListeners("willUpdate");
-        };
+        }
         // Note: Currently only running on root node
-        ProjectionNode.prototype.didUpdate = function () {
-            var updateWasBlocked = this.isUpdateBlocked();
+        didUpdate() {
+            const updateWasBlocked = this.isUpdateBlocked();
             // When doing an instant transition, we skip the layout update,
             // but should still clean up the measurements so that the next
             // snapshot could be taken correctly.
@@ -353,46 +338,45 @@ function createProjectionNode(_a) {
             flushSync.update();
             flushSync.preRender();
             flushSync.render();
-        };
-        ProjectionNode.prototype.clearAllSnapshots = function () {
+        }
+        clearAllSnapshots() {
             this.nodes.forEach(clearSnapshot);
             this.sharedNodes.forEach(removeLeadSnapshots);
-        };
-        ProjectionNode.prototype.scheduleUpdateProjection = function () {
+        }
+        scheduleUpdateProjection() {
             sync.preRender(this.updateProjection, false, true);
-        };
-        ProjectionNode.prototype.scheduleCheckAfterUnmount = function () {
-            var _this = this;
+        }
+        scheduleCheckAfterUnmount() {
             /**
              * If the unmounting node is in a layoutGroup and did trigger a willUpdate,
              * we manually call didUpdate to give a chance to the siblings to animate.
              * Otherwise, cleanup all snapshots to prevents future nodes from reusing them.
              */
-            sync.postRender(function () {
-                if (_this.isLayoutDirty) {
-                    _this.root.didUpdate();
+            sync.postRender(() => {
+                if (this.isLayoutDirty) {
+                    this.root.didUpdate();
                 }
                 else {
-                    _this.root.checkUpdateFailed();
+                    this.root.checkUpdateFailed();
                 }
             });
-        };
+        }
         /**
          * Update measurements
          */
-        ProjectionNode.prototype.updateSnapshot = function () {
+        updateSnapshot() {
             if (this.snapshot || !this.instance)
                 return;
-            var measured = this.measure();
-            var layout = this.removeTransform(this.removeElementScroll(measured));
+            const measured = this.measure();
+            const layout = this.removeTransform(this.removeElementScroll(measured));
             roundBox(layout);
             this.snapshot = {
-                measured: measured,
-                layout: layout,
+                measured,
+                layout,
                 latestValues: {},
             };
-        };
-        ProjectionNode.prototype.updateLayout = function () {
+        }
+        updateLayout() {
             var _a;
             if (!this.instance)
                 return;
@@ -410,16 +394,16 @@ function createProjectionNode(_a) {
              * up to date.
              */
             if (this.resumeFrom && !this.resumeFrom.instance) {
-                for (var i = 0; i < this.path.length; i++) {
-                    var node = this.path[i];
+                for (let i = 0; i < this.path.length; i++) {
+                    const node = this.path[i];
                     node.updateScroll();
                 }
             }
-            var measured = this.measure();
+            const measured = this.measure();
             roundBox(measured);
-            var prevLayout = this.layout;
+            const prevLayout = this.layout;
             this.layout = {
-                measured: measured,
+                measured,
                 actual: this.removeElementScroll(measured),
             };
             this.layoutCorrected = createBox();
@@ -427,22 +411,22 @@ function createProjectionNode(_a) {
             this.projectionDelta = undefined;
             this.notifyListeners("measure", this.layout.actual);
             (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notifyLayoutMeasure(this.layout.actual, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.actual);
-        };
-        ProjectionNode.prototype.updateScroll = function () {
+        }
+        updateScroll() {
             if (this.options.layoutScroll && this.instance) {
                 this.isScrollRoot = checkIsScrollRoot(this.instance);
                 this.scroll = measureScroll(this.instance);
             }
-        };
-        ProjectionNode.prototype.resetTransform = function () {
+        }
+        resetTransform() {
             var _a;
             if (!resetTransform)
                 return;
-            var isResetRequested = this.isLayoutDirty || this.shouldResetTransform;
-            var hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
-            var transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
-            var transformTemplateValue = transformTemplate === null || transformTemplate === void 0 ? void 0 : transformTemplate(this.latestValues, "");
-            var transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;
+            const isResetRequested = this.isLayoutDirty || this.shouldResetTransform;
+            const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
+            const transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
+            const transformTemplateValue = transformTemplate === null || transformTemplate === void 0 ? void 0 : transformTemplate(this.latestValues, "");
+            const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;
             if (isResetRequested &&
                 (hasProjection ||
                     hasTransform(this.latestValues) ||
@@ -451,38 +435,38 @@ function createProjectionNode(_a) {
                 this.shouldResetTransform = false;
                 this.scheduleRender();
             }
-        };
-        ProjectionNode.prototype.measure = function () {
-            var visualElement = this.options.visualElement;
+        }
+        measure() {
+            const { visualElement } = this.options;
             if (!visualElement)
                 return createBox();
-            var box = visualElement.measureViewportBox();
+            const box = visualElement.measureViewportBox();
             // Remove viewport scroll to give page-relative coordinates
-            var scroll = this.root.scroll;
+            const { scroll } = this.root;
             if (scroll) {
                 translateAxis(box.x, scroll.x);
                 translateAxis(box.y, scroll.y);
             }
             return box;
-        };
-        ProjectionNode.prototype.removeElementScroll = function (box) {
-            var boxWithoutScroll = createBox();
+        }
+        removeElementScroll(box) {
+            const boxWithoutScroll = createBox();
             copyBoxInto(boxWithoutScroll, box);
             /**
              * Performance TODO: Keep a cumulative scroll offset down the tree
              * rather than loop back up the path.
              */
-            for (var i = 0; i < this.path.length; i++) {
-                var node = this.path[i];
-                var scroll_1 = node.scroll, options = node.options, isScrollRoot = node.isScrollRoot;
-                if (node !== this.root && scroll_1 && options.layoutScroll) {
+            for (let i = 0; i < this.path.length; i++) {
+                const node = this.path[i];
+                const { scroll, options, isScrollRoot } = node;
+                if (node !== this.root && scroll && options.layoutScroll) {
                     /**
                      * If this is a new scroll root, we want to remove all previous scrolls
                      * from the viewport box.
                      */
                     if (isScrollRoot) {
                         copyBoxInto(boxWithoutScroll, box);
-                        var rootScroll = this.root.scroll;
+                        const { scroll: rootScroll } = this.root;
                         /**
                          * Undo the application of page scroll that was originally added
                          * to the measured bounding box.
@@ -492,18 +476,17 @@ function createProjectionNode(_a) {
                             translateAxis(boxWithoutScroll.y, -rootScroll.y);
                         }
                     }
-                    translateAxis(boxWithoutScroll.x, scroll_1.x);
-                    translateAxis(boxWithoutScroll.y, scroll_1.y);
+                    translateAxis(boxWithoutScroll.x, scroll.x);
+                    translateAxis(boxWithoutScroll.y, scroll.y);
                 }
             }
             return boxWithoutScroll;
-        };
-        ProjectionNode.prototype.applyTransform = function (box, transformOnly) {
-            if (transformOnly === void 0) { transformOnly = false; }
-            var withTransforms = createBox();
+        }
+        applyTransform(box, transformOnly = false) {
+            const withTransforms = createBox();
             copyBoxInto(withTransforms, box);
-            for (var i = 0; i < this.path.length; i++) {
-                var node = this.path[i];
+            for (let i = 0; i < this.path.length; i++) {
+                const node = this.path[i];
                 if (!transformOnly &&
                     node.options.layoutScroll &&
                     node.scroll &&
@@ -521,20 +504,20 @@ function createProjectionNode(_a) {
                 transformBox(withTransforms, this.latestValues);
             }
             return withTransforms;
-        };
-        ProjectionNode.prototype.removeTransform = function (box) {
+        }
+        removeTransform(box) {
             var _a;
-            var boxWithoutTransform = createBox();
+            const boxWithoutTransform = createBox();
             copyBoxInto(boxWithoutTransform, box);
-            for (var i = 0; i < this.path.length; i++) {
-                var node = this.path[i];
+            for (let i = 0; i < this.path.length; i++) {
+                const node = this.path[i];
                 if (!node.instance)
                     continue;
                 if (!hasTransform(node.latestValues))
                     continue;
                 hasScale(node.latestValues) && node.updateSnapshot();
-                var sourceBox = createBox();
-                var nodeBox = node.measure();
+                const sourceBox = createBox();
+                const nodeBox = node.measure();
                 copyBoxInto(sourceBox, nodeBox);
                 removeBoxTransforms(boxWithoutTransform, node.latestValues, (_a = node.snapshot) === null || _a === void 0 ? void 0 : _a.layout, sourceBox);
             }
@@ -542,19 +525,19 @@ function createProjectionNode(_a) {
                 removeBoxTransforms(boxWithoutTransform, this.latestValues);
             }
             return boxWithoutTransform;
-        };
+        }
         /**
          *
          */
-        ProjectionNode.prototype.setTargetDelta = function (delta) {
+        setTargetDelta(delta) {
             this.targetDelta = delta;
             this.root.scheduleUpdateProjection();
-        };
-        ProjectionNode.prototype.setOptions = function (options) {
+        }
+        setOptions(options) {
             var _a;
-            this.options = __assign(__assign(__assign({}, this.options), options), { crossfade: (_a = options.crossfade) !== null && _a !== void 0 ? _a : true });
-        };
-        ProjectionNode.prototype.clearMeasurements = function () {
+            this.options = Object.assign(Object.assign(Object.assign({}, this.options), options), { crossfade: (_a = options.crossfade) !== null && _a !== void 0 ? _a : true });
+        }
+        clearMeasurements() {
             this.scroll = undefined;
             this.layout = undefined;
             this.snapshot = undefined;
@@ -562,13 +545,13 @@ function createProjectionNode(_a) {
             this.targetDelta = undefined;
             this.target = undefined;
             this.isLayoutDirty = false;
-        };
+        }
         /**
          * Frame calculations
          */
-        ProjectionNode.prototype.resolveTargetDelta = function () {
+        resolveTargetDelta() {
             var _a;
-            var _b = this.options, layout = _b.layout, layoutId = _b.layoutId;
+            const { layout, layoutId } = this.options;
             /**
              * If we have no layout, we can't perform projection, so early return
              */
@@ -647,8 +630,8 @@ function createProjectionNode(_a) {
                     copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
                 }
             }
-        };
-        ProjectionNode.prototype.getClosestProjectingParent = function () {
+        }
+        getClosestProjectingParent() {
             if (!this.parent || hasTransform(this.parent.latestValues))
                 return undefined;
             if ((this.parent.relativeTarget || this.parent.targetDelta) &&
@@ -658,10 +641,10 @@ function createProjectionNode(_a) {
             else {
                 return this.parent.getClosestProjectingParent();
             }
-        };
-        ProjectionNode.prototype.calcProjection = function () {
+        }
+        calcProjection() {
             var _a;
-            var _b = this.options, layout = _b.layout, layoutId = _b.layoutId;
+            const { layout, layoutId } = this.options;
             /**
              * If this section of the tree isn't animating we can
              * delete our target sources for the following frame.
@@ -674,7 +657,7 @@ function createProjectionNode(_a) {
             }
             if (!this.layout || !(layout || layoutId))
                 return;
-            var lead = this.getLead();
+            const lead = this.getLead();
             /**
              * Reset the corrected box with the latest values from box, as we're then going
              * to perform mutative operations on it.
@@ -685,16 +668,16 @@ function createProjectionNode(_a) {
              * is the layout box, as it will appear on screen as a result of the transforms of its parents.
              */
             applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, Boolean(this.resumingFrom) || this !== lead);
-            var target = lead.target;
+            const { target } = lead;
             if (!target)
                 return;
             if (!this.projectionDelta) {
                 this.projectionDelta = createDelta();
                 this.projectionDeltaWithTransform = createDelta();
             }
-            var prevTreeScaleX = this.treeScale.x;
-            var prevTreeScaleY = this.treeScale.y;
-            var prevProjectionTransform = this.projectionTransform;
+            const prevTreeScaleX = this.treeScale.x;
+            const prevTreeScaleY = this.treeScale.y;
+            const prevProjectionTransform = this.projectionTransform;
             /**
              * Update the delta between the corrected box and the target box before user-set transforms were applied.
              * This will allow us to calculate the corrected borderRadius and boxShadow to compensate
@@ -713,67 +696,63 @@ function createProjectionNode(_a) {
                 this.scheduleRender();
                 this.notifyListeners("projectionUpdate", target);
             }
-        };
-        ProjectionNode.prototype.hide = function () {
+        }
+        hide() {
             this.isVisible = false;
             // TODO: Schedule render
-        };
-        ProjectionNode.prototype.show = function () {
+        }
+        show() {
             this.isVisible = true;
             // TODO: Schedule render
-        };
-        ProjectionNode.prototype.scheduleRender = function (notifyAll) {
+        }
+        scheduleRender(notifyAll = true) {
             var _a, _b, _c;
-            if (notifyAll === void 0) { notifyAll = true; }
             (_b = (_a = this.options).scheduleRender) === null || _b === void 0 ? void 0 : _b.call(_a);
             notifyAll && ((_c = this.getStack()) === null || _c === void 0 ? void 0 : _c.scheduleRender());
             if (this.resumingFrom && !this.resumingFrom.instance) {
                 this.resumingFrom = undefined;
             }
-        };
-        ProjectionNode.prototype.setAnimationOrigin = function (delta, hasOnlyRelativeTargetChanged) {
-            var _this = this;
+        }
+        setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
             var _a;
-            if (hasOnlyRelativeTargetChanged === void 0) { hasOnlyRelativeTargetChanged = false; }
-            var snapshot = this.snapshot;
-            var snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {};
-            var mixedValues = __assign({}, this.latestValues);
-            var targetDelta = createDelta();
+            const snapshot = this.snapshot;
+            const snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {};
+            const mixedValues = Object.assign({}, this.latestValues);
+            const targetDelta = createDelta();
             this.relativeTarget = this.relativeTargetOrigin = undefined;
             this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
-            var relativeLayout = createBox();
-            var isSharedLayoutAnimation = snapshot === null || snapshot === void 0 ? void 0 : snapshot.isShared;
-            var isOnlyMember = (((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.members.length) || 0) <= 1;
-            var shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation &&
+            const relativeLayout = createBox();
+            const isSharedLayoutAnimation = snapshot === null || snapshot === void 0 ? void 0 : snapshot.isShared;
+            const isOnlyMember = (((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.members.length) || 0) <= 1;
+            const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation &&
                 !isOnlyMember &&
                 this.options.crossfade === true &&
                 !this.path.some(hasOpacityCrossfade));
             this.animationProgress = 0;
-            this.mixTargetDelta = function (latest) {
+            this.mixTargetDelta = (latest) => {
                 var _a;
-                var progress = latest / 1000;
+                const progress = latest / 1000;
                 mixAxisDelta(targetDelta.x, delta.x, progress);
                 mixAxisDelta(targetDelta.y, delta.y, progress);
-                _this.setTargetDelta(targetDelta);
-                if (_this.relativeTarget &&
-                    _this.relativeTargetOrigin &&
-                    _this.layout &&
-                    ((_a = _this.relativeParent) === null || _a === void 0 ? void 0 : _a.layout)) {
-                    calcRelativePosition(relativeLayout, _this.layout.actual, _this.relativeParent.layout.actual);
-                    mixBox(_this.relativeTarget, _this.relativeTargetOrigin, relativeLayout, progress);
+                this.setTargetDelta(targetDelta);
+                if (this.relativeTarget &&
+                    this.relativeTargetOrigin &&
+                    this.layout &&
+                    ((_a = this.relativeParent) === null || _a === void 0 ? void 0 : _a.layout)) {
+                    calcRelativePosition(relativeLayout, this.layout.actual, this.relativeParent.layout.actual);
+                    mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);
                 }
                 if (isSharedLayoutAnimation) {
-                    _this.animationValues = mixedValues;
-                    mixValues(mixedValues, snapshotLatestValues, _this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember);
+                    this.animationValues = mixedValues;
+                    mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember);
                 }
-                _this.root.scheduleUpdateProjection();
-                _this.scheduleRender();
-                _this.animationProgress = progress;
+                this.root.scheduleUpdateProjection();
+                this.scheduleRender();
+                this.animationProgress = progress;
             };
             this.mixTargetDelta(0);
-        };
-        ProjectionNode.prototype.startAnimation = function (options) {
-            var _this = this;
+        }
+        startAnimation(options) {
             var _a, _b;
             this.notifyListeners("animationStart");
             (_a = this.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop();
@@ -789,24 +768,24 @@ function createProjectionNode(_a) {
              * where the target is the same as when the animation started, so we can
              * calculate the relative positions correctly for instant transitions.
              */
-            this.pendingAnimation = sync.update(function () {
+            this.pendingAnimation = sync.update(() => {
                 globalProjectionState.hasAnimatedSinceResize = true;
-                _this.currentAnimation = animate(0, animationTarget, __assign(__assign({}, options), { onUpdate: function (latest) {
+                this.currentAnimation = animate(0, animationTarget, Object.assign(Object.assign({}, options), { onUpdate: (latest) => {
                         var _a;
-                        _this.mixTargetDelta(latest);
+                        this.mixTargetDelta(latest);
                         (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, latest);
-                    }, onComplete: function () {
+                    }, onComplete: () => {
                         var _a;
                         (_a = options.onComplete) === null || _a === void 0 ? void 0 : _a.call(options);
-                        _this.completeAnimation();
+                        this.completeAnimation();
                     } }));
-                if (_this.resumingFrom) {
-                    _this.resumingFrom.currentAnimation = _this.currentAnimation;
+                if (this.resumingFrom) {
+                    this.resumingFrom.currentAnimation = this.currentAnimation;
                 }
-                _this.pendingAnimation = undefined;
+                this.pendingAnimation = undefined;
             });
-        };
-        ProjectionNode.prototype.completeAnimation = function () {
+        }
+        completeAnimation() {
             var _a;
             if (this.resumingFrom) {
                 this.resumingFrom.currentAnimation = undefined;
@@ -818,17 +797,17 @@ function createProjectionNode(_a) {
                     this.animationValues =
                         undefined;
             this.notifyListeners("animationComplete");
-        };
-        ProjectionNode.prototype.finishAnimation = function () {
+        }
+        finishAnimation() {
             var _a;
             if (this.currentAnimation) {
                 (_a = this.mixTargetDelta) === null || _a === void 0 ? void 0 : _a.call(this, animationTarget);
                 this.currentAnimation.stop();
             }
             this.completeAnimation();
-        };
-        ProjectionNode.prototype.applyTransformsToTarget = function () {
-            var _a = this.getLead(), targetWithTransforms = _a.targetWithTransforms, target = _a.target, layout = _a.layout, latestValues = _a.latestValues;
+        }
+        applyTransformsToTarget() {
+            const { targetWithTransforms, target, layout, latestValues } = this.getLead();
             if (!targetWithTransforms || !target || !layout)
                 return;
             copyBoxInto(targetWithTransforms, target);
@@ -845,41 +824,40 @@ function createProjectionNode(_a) {
              * into the desired bounding box.
              */
             calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);
-        };
-        ProjectionNode.prototype.registerSharedNode = function (layoutId, node) {
+        }
+        registerSharedNode(layoutId, node) {
             var _a, _b, _c;
             if (!this.sharedNodes.has(layoutId)) {
                 this.sharedNodes.set(layoutId, new NodeStack());
             }
-            var stack = this.sharedNodes.get(layoutId);
+            const stack = this.sharedNodes.get(layoutId);
             stack.add(node);
             node.promote({
                 transition: (_a = node.options.initialPromotionConfig) === null || _a === void 0 ? void 0 : _a.transition,
                 preserveFollowOpacity: (_c = (_b = node.options.initialPromotionConfig) === null || _b === void 0 ? void 0 : _b.shouldPreserveFollowOpacity) === null || _c === void 0 ? void 0 : _c.call(_b, node),
             });
-        };
-        ProjectionNode.prototype.isLead = function () {
-            var stack = this.getStack();
+        }
+        isLead() {
+            const stack = this.getStack();
             return stack ? stack.lead === this : true;
-        };
-        ProjectionNode.prototype.getLead = function () {
+        }
+        getLead() {
             var _a;
-            var layoutId = this.options.layoutId;
+            const { layoutId } = this.options;
             return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this;
-        };
-        ProjectionNode.prototype.getPrevLead = function () {
+        }
+        getPrevLead() {
             var _a;
-            var layoutId = this.options.layoutId;
+            const { layoutId } = this.options;
             return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : undefined;
-        };
-        ProjectionNode.prototype.getStack = function () {
-            var layoutId = this.options.layoutId;
+        }
+        getStack() {
+            const { layoutId } = this.options;
             if (layoutId)
                 return this.root.sharedNodes.get(layoutId);
-        };
-        ProjectionNode.prototype.promote = function (_a) {
-            var _b = _a === void 0 ? {} : _a, needsReset = _b.needsReset, transition = _b.transition, preserveFollowOpacity = _b.preserveFollowOpacity;
-            var stack = this.getStack();
+        }
+        promote({ needsReset, transition, preserveFollowOpacity, } = {}) {
+            const stack = this.getStack();
             if (stack)
                 stack.promote(this, preserveFollowOpacity);
             if (needsReset) {
@@ -887,29 +865,29 @@ function createProjectionNode(_a) {
                 this.needsReset = true;
             }
             if (transition)
-                this.setOptions({ transition: transition });
-        };
-        ProjectionNode.prototype.relegate = function () {
-            var stack = this.getStack();
+                this.setOptions({ transition });
+        }
+        relegate() {
+            const stack = this.getStack();
             if (stack) {
                 return stack.relegate(this);
             }
             else {
                 return false;
             }
-        };
-        ProjectionNode.prototype.resetRotation = function () {
-            var visualElement = this.options.visualElement;
+        }
+        resetRotation() {
+            const { visualElement } = this.options;
             if (!visualElement)
                 return;
             // If there's no detected rotation values, we can early return without a forced render.
-            var hasRotate = false;
+            let hasRotate = false;
             // Keep a record of all the values we've reset
-            var resetValues = {};
+            const resetValues = {};
             // Check the rotate value of all axes and reset to 0
-            for (var i = 0; i < transformAxes.length; i++) {
-                var axis = transformAxes[i];
-                var key = "rotate" + axis;
+            for (let i = 0; i < transformAxes.length; i++) {
+                const axis = transformAxes[i];
+                const key = "rotate" + axis;
                 // If this rotation doesn't exist as a motion value, then we don't
                 // need to reset it
                 if (!visualElement.getStaticValue(key)) {
@@ -927,18 +905,17 @@ function createProjectionNode(_a) {
             // set to 0.
             visualElement === null || visualElement === void 0 ? void 0 : visualElement.syncRender();
             // Put back all the values we reset
-            for (var key in resetValues) {
+            for (const key in resetValues) {
                 visualElement.setStaticValue(key, resetValues[key]);
             }
             // Schedule a render for the next frame. This ensures we won't visually
             // see the element with the reset rotate value applied.
             visualElement.scheduleRender();
-        };
-        ProjectionNode.prototype.getProjectionStyles = function (styleProp) {
+        }
+        getProjectionStyles(styleProp = {}) {
             var _a, _b, _c, _d, _e, _f;
-            if (styleProp === void 0) { styleProp = {}; }
             // TODO: Return lifecycle-persistent object
-            var styles = {};
+            const styles = {};
             if (!this.instance || this.isSVG)
                 return styles;
             if (!this.isVisible) {
@@ -947,7 +924,7 @@ function createProjectionNode(_a) {
             else {
                 styles.visibility = "";
             }
-            var transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
+            const transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
             if (this.needsReset) {
                 this.needsReset = false;
                 styles.opacity = "";
@@ -958,9 +935,9 @@ function createProjectionNode(_a) {
                     : "none";
                 return styles;
             }
-            var lead = this.getLead();
+            const lead = this.getLead();
             if (!this.projectionDelta || !this.layout || !lead.target) {
-                var emptyStyles = {};
+                const emptyStyles = {};
                 if (this.options.layoutId) {
                     emptyStyles.opacity = (_b = this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1;
                     emptyStyles.pointerEvents =
@@ -974,14 +951,14 @@ function createProjectionNode(_a) {
                 }
                 return emptyStyles;
             }
-            var valuesToRender = lead.animationValues || lead.latestValues;
+            const valuesToRender = lead.animationValues || lead.latestValues;
             this.applyTransformsToTarget();
             styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
             if (transformTemplate) {
                 styles.transform = transformTemplate(valuesToRender, styles.transform);
             }
-            var _g = this.projectionDelta, x = _g.x, y = _g.y;
-            styles.transformOrigin = "".concat(x.origin * 100, "% ").concat(y.origin * 100, "% 0");
+            const { x, y } = this.projectionDelta;
+            styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
             if (lead.animationValues) {
                 /**
                  * If the lead component is animating, assign this either the entering/leaving
@@ -1007,14 +984,14 @@ function createProjectionNode(_a) {
             /**
              * Apply scale correction
              */
-            for (var key in scaleCorrectors) {
+            for (const key in scaleCorrectors) {
                 if (valuesToRender[key] === undefined)
                     continue;
-                var _h = scaleCorrectors[key], correct = _h.correct, applyTo = _h.applyTo;
-                var corrected = correct(valuesToRender[key], lead);
+                const { correct, applyTo } = scaleCorrectors[key];
+                const corrected = correct(valuesToRender[key], lead);
                 if (applyTo) {
-                    var num = applyTo.length;
-                    for (var i = 0; i < num; i++) {
+                    const num = applyTo.length;
+                    for (let i = 0; i < num; i++) {
                         styles[applyTo[i]] = corrected;
                     }
                 }
@@ -1034,62 +1011,61 @@ function createProjectionNode(_a) {
                         : "none";
             }
             return styles;
-        };
-        ProjectionNode.prototype.clearSnapshot = function () {
+        }
+        clearSnapshot() {
             this.resumeFrom = this.snapshot = undefined;
-        };
+        }
         // Only run on root
-        ProjectionNode.prototype.resetTree = function () {
-            this.root.nodes.forEach(function (node) { var _a; return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); });
+        resetTree() {
+            this.root.nodes.forEach((node) => { var _a; return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); });
             this.root.nodes.forEach(clearMeasurements);
             this.root.sharedNodes.clear();
-        };
-        return ProjectionNode;
-    }());
+        }
+    };
 }
 function updateLayout(node) {
     node.updateLayout();
 }
 function notifyLayoutUpdate(node) {
     var _a, _b, _c, _d;
-    var snapshot = (_b = (_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) !== null && _b !== void 0 ? _b : node.snapshot;
+    const snapshot = (_b = (_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) !== null && _b !== void 0 ? _b : node.snapshot;
     if (node.isLead() &&
         node.layout &&
         snapshot &&
         node.hasListeners("didUpdate")) {
-        var _e = node.layout, layout_1 = _e.actual, measuredLayout = _e.measured;
+        const { actual: layout, measured: measuredLayout } = node.layout;
         // TODO Maybe we want to also resize the layout snapshot so we don't trigger
         // animations for instance if layout="size" and an element has only changed position
         if (node.options.animationType === "size") {
-            eachAxis(function (axis) {
-                var axisSnapshot = snapshot.isShared
+            eachAxis((axis) => {
+                const axisSnapshot = snapshot.isShared
                     ? snapshot.measured[axis]
                     : snapshot.layout[axis];
-                var length = calcLength(axisSnapshot);
-                axisSnapshot.min = layout_1[axis].min;
+                const length = calcLength(axisSnapshot);
+                axisSnapshot.min = layout[axis].min;
                 axisSnapshot.max = axisSnapshot.min + length;
             });
         }
         else if (node.options.animationType === "position") {
-            eachAxis(function (axis) {
-                var axisSnapshot = snapshot.isShared
+            eachAxis((axis) => {
+                const axisSnapshot = snapshot.isShared
                     ? snapshot.measured[axis]
                     : snapshot.layout[axis];
-                var length = calcLength(layout_1[axis]);
+                const length = calcLength(layout[axis]);
                 axisSnapshot.max = axisSnapshot.min + length;
             });
         }
-        var layoutDelta = createDelta();
-        calcBoxDelta(layoutDelta, layout_1, snapshot.layout);
-        var visualDelta = createDelta();
+        const layoutDelta = createDelta();
+        calcBoxDelta(layoutDelta, layout, snapshot.layout);
+        const visualDelta = createDelta();
         if (snapshot.isShared) {
             calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measured);
         }
         else {
-            calcBoxDelta(visualDelta, layout_1, snapshot.layout);
+            calcBoxDelta(visualDelta, layout, snapshot.layout);
         }
-        var hasLayoutChanged = !isDeltaZero(layoutDelta);
-        var hasRelativeTargetChanged = false;
+        const hasLayoutChanged = !isDeltaZero(layoutDelta);
+        let hasRelativeTargetChanged = false;
         if (!node.resumeFrom) {
             node.relativeParent = node.getClosestProjectingParent();
             /**
@@ -1097,12 +1073,12 @@ function notifyLayoutUpdate(node) {
              * the relative snapshot is not relavent
              */
             if (node.relativeParent && !node.relativeParent.resumeFrom) {
-                var _f = node.relativeParent, parentSnapshot = _f.snapshot, parentLayout = _f.layout;
+                const { snapshot: parentSnapshot, layout: parentLayout } = node.relativeParent;
                 if (parentSnapshot && parentLayout) {
-                    var relativeSnapshot = createBox();
+                    const relativeSnapshot = createBox();
                     calcRelativePosition(relativeSnapshot, snapshot.layout, parentSnapshot.layout);
-                    var relativeLayout = createBox();
-                    calcRelativePosition(relativeLayout, layout_1, parentLayout.actual);
+                    const relativeLayout = createBox();
+                    calcRelativePosition(relativeLayout, layout, parentLayout.actual);
                     if (!boxEquals(relativeSnapshot, relativeLayout)) {
                         hasRelativeTargetChanged = true;
                     }
@@ -1110,12 +1086,12 @@ function notifyLayoutUpdate(node) {
             }
         }
         node.notifyListeners("didUpdate", {
-            layout: layout_1,
-            snapshot: snapshot,
+            layout,
+            snapshot,
             delta: visualDelta,
-            layoutDelta: layoutDelta,
-            hasLayoutChanged: hasLayoutChanged,
-            hasRelativeTargetChanged: hasRelativeTargetChanged,
+            layoutDelta,
+            hasLayoutChanged,
+            hasRelativeTargetChanged,
         });
     }
     else if (node.isLead()) {
@@ -1135,7 +1111,7 @@ function clearMeasurements(node) {
     node.clearMeasurements();
 }
 function resetTransformStyle(node) {
-    var visualElement = node.options.visualElement;
+    const { visualElement } = node.options;
     if (visualElement === null || visualElement === void 0 ? void 0 : visualElement.getProps().onBeforeLayoutMeasure) {
         visualElement.notifyBeforeLayoutMeasure();
     }
@@ -1174,7 +1150,7 @@ function mixBox(output, from, to, p) {
 function hasOpacityCrossfade(node) {
     return (node.animationValues && node.animationValues.opacityExit !== undefined);
 }
-var defaultLayoutTransition = {
+const defaultLayoutTransition = {
     duration: 0.45,
     ease: [0.4, 0, 0.1, 1],
 };
@@ -1183,15 +1159,15 @@ function mountNodeEarly(node, id) {
      * Rather than searching the DOM from document we can search the
      * path for the deepest mounted ancestor and search from there
      */
-    var searchNode = node.root;
-    for (var i = node.path.length - 1; i >= 0; i--) {
+    let searchNode = node.root;
+    for (let i = node.path.length - 1; i >= 0; i--) {
         if (Boolean(node.path[i].instance)) {
             searchNode = node.path[i];
             break;
         }
     }
-    var searchElement = searchNode && searchNode !== node.root ? searchNode.instance : document;
-    var element = searchElement.querySelector("[data-projection-id=\"".concat(id, "\"]"));
+    const searchElement = searchNode && searchNode !== node.root ? searchNode.instance : document;
+    const element = searchElement.querySelector(`[data-projection-id="${id}"]`);
     if (element)
         node.mount(element, true);
 }