Merge pull request #2479 from framer/fix/layout-animations-html

Limit layout animations to HTML elements
motiondivision · Jan 9, 2024 · 8e76146 · 8e76146
2 parents 4e3f426 + 807feee
commit 8e76146
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts b/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts
@@ -210,8 +210,11 @@ export class VisualElementDragControls {
             this.stop(event, info)
 
         const resumeAnimation = () =>
-            eachAxis((axis) => (this.getAnimationState(axis) === 'paused') && this.getAxisMotionValue(axis).animation?.play())
-
+            eachAxis(
+                (axis) =>
+                    this.getAnimationState(axis) === "paused" &&
+                    this.getAxisMotionValue(axis).animation?.play()
+            )
 
         const { dragSnapToOrigin } = this.getProps()
         this.panSession = new PanSession(
@@ -221,7 +224,7 @@ export class VisualElementDragControls {
                 onStart,
                 onMove,
                 onSessionEnd,
-                resumeAnimation
+                resumeAnimation,
             },
             {
                 transformPagePoint: this.visualElement.getTransformPagePoint(),

diff --git a/packages/framer-motion/src/render/VisualElement.ts b/packages/framer-motion/src/render/VisualElement.ts
@@ -535,7 +535,11 @@ export abstract class VisualElement<
             }
         }
 
-        if (!this.projection && ProjectionNodeConstructor) {
+        if (
+            this.type === "html" &&
+            !this.projection &&
+            ProjectionNodeConstructor
+        ) {
             this.projection = new ProjectionNodeConstructor(
                 this.latestValues,
                 this.parent && this.parent.projection

diff --git a/packages/framer-motion/src/render/html/HTMLVisualElement.ts b/packages/framer-motion/src/render/html/HTMLVisualElement.ts
@@ -24,7 +24,7 @@ export class HTMLVisualElement extends DOMVisualElement<
     HTMLRenderState,
     DOMVisualElementOptions
 > {
-    type: "html"
+    type = "html"
 
     readValueFromInstance(
         instance: HTMLElement,

diff --git a/packages/framer-motion/src/render/svg/SVGVisualElement.ts b/packages/framer-motion/src/render/svg/SVGVisualElement.ts
@@ -21,7 +21,7 @@ export class SVGVisualElement extends DOMVisualElement<
     SVGRenderState,
     DOMVisualElementOptions
 > {
-    type: "svg"
+    type = "svg"
 
     isSVGTag = false