feat(fade-move): adds props to disable scaling

Author: itsdouges

packages/core/src/motions/CrossFadeMove/__docs__/docs.mdx

@@ -13,7 +13,7 @@ import * as Styled from './styled';
 # CrossFadeMove
 
 Is a composite motion of CrossFade and [Move](/move).
-Useful for moving an element moving from one position to another when the elements have **stark visual differences** to each other, but is still of a similar aspect ratio.
+Useful for moving an element moving from one position to another when the elements have **stark visual differences** to each other.
 
 ## Usage
 

packages/core/src/motions/FadeMove/index.tsx

@@ -5,7 +5,6 @@ import Collector, {
   CollectorActions,
   MotionData,
 } from '../../Collector';
-import * as math from '../../lib/math';
 import { recalculateElementBoundingBoxFromScroll } from '../../lib/dom';
 import noop from '../../lib/noop';
 import { standard } from '../../lib/curves';
@@ -28,6 +27,18 @@ export interface FadeMoveProps extends CollectorChildrenProps {
    * Timing function to be used in the transition.
    */
   timingFunction: string;
+
+  /**
+   * Enables scaling of the x-axis.
+   * Defaults to true.
+   */
+  scaleX?: boolean;
+
+  /**
+   * Enables scaling of the y-axis.
+   * Defaults to true.
+   */
+  scaleY?: boolean;
 }
 
 export default class FadeMove extends React.Component<FadeMoveProps> {
@@ -40,25 +51,21 @@ export default class FadeMove extends React.Component<FadeMoveProps> {
   calculatedDuration: number = 0;
 
   renderMotion = (data: MotionData, options: { moveToTarget?: boolean } = {}) => {
-    const { timingFunction, duration, zIndex } = this.props;
-    // Scroll could have changed between unmount and this prepare step, let's recalculate
-    // just in case.
-    const fromTargetSizeLocation = recalculateElementBoundingBoxFromScroll(
-      data.origin.elementBoundingBox
-    );
-    const fromEndXOffset =
-      data.destination.elementBoundingBox.location.left - fromTargetSizeLocation.location.left;
-    const fromEndYOffset =
-      data.destination.elementBoundingBox.location.top - fromTargetSizeLocation.location.top;
+    const { timingFunction, duration, zIndex, scaleY, scaleX } = this.props;
+    // Scroll could have changed between unmount and this prepare step, let's recalculate just in case.
+    const originTarget = recalculateElementBoundingBoxFromScroll(data.origin.elementBoundingBox);
+    const destinationTarget = data.destination.elementBoundingBox;
+    const translateToX = destinationTarget.location.left - originTarget.location.left;
+    const translateToY = destinationTarget.location.top - originTarget.location.top;
     this.calculatedDuration =
-      duration === 'dynamic'
-        ? dynamic(fromTargetSizeLocation, data.destination.elementBoundingBox)
-        : duration;
+      duration === 'dynamic' ? dynamic(originTarget, destinationTarget) : duration;
+    const scaleToX = scaleX ? originTarget.size.width / destinationTarget.size.width : 1;
+    const scaleToY = scaleY ? originTarget.size.height / destinationTarget.size.height : 1;
 
     return data.origin.render({
       ref: noop,
       style: {
-        ...fromTargetSizeLocation.location,
+        ...originTarget.location,
         zIndex,
         transition: `transform ${this.calculatedDuration}ms ${timingFunction}, opacity ${this
           .calculatedDuration / 2}ms ${timingFunction}`,
@@ -68,17 +75,11 @@ export default class FadeMove extends React.Component<FadeMoveProps> {
         opacity: 1,
         // Elminate any margins so they don't affect the transition.
         margin: 0,
-        height: `${fromTargetSizeLocation.size.height}px`,
-        width: `${fromTargetSizeLocation.size.width}px`,
+        height: `${originTarget.size.height}px`,
+        width: `${originTarget.size.width}px`,
         ...(options.moveToTarget
           ? {
-              transform: `translate3d(${fromEndXOffset}px, ${fromEndYOffset}px, 0) scale3d(${math.percentageDifference(
-                data.destination.elementBoundingBox.size.width,
-                fromTargetSizeLocation.size.width
-              )}, ${math.percentageDifference(
-                data.destination.elementBoundingBox.size.height,
-                fromTargetSizeLocation.size.height
-              )}, 1)`,
+              transform: `translate3d(${translateToX}px, ${translateToY}px, 0) scale3d(${scaleToX}, ${scaleToY}, 1)`,
               opacity: 0,
             }
           : {}),