Merge pull request #91 from madou/dynamic-duration

Dynamic duration

Author: Madou

.eslintrc

@@ -19,6 +19,7 @@
     "react/prefer-stateless-function": "never",
     "react/sort-comp": "off",
     "react/destructuring-assignment": "never",
+    "import/prefer-default-export": "off",
     "import/no-extraneous-dependencies": [
       "error",
       { "devDependencies": ["**/*test.tsx", "**/*stories.tsx"] }

packages/yubaba/package.json

@@ -13,7 +13,7 @@
   },
   "size-limit": [
     {
-      "limit": "5.4 KB",
+      "limit": "5.7 KB",
       "path": "dist/es6/packages/yubaba/src/index.js"
     }
   ],

packages/yubaba/src/animations/CircleExpand/index.tsx

@@ -10,10 +10,13 @@ import {
   calculateWindowCentre,
   calculateElementCenterInViewport,
   recalculateElementBoundingBoxFromScroll,
+  getWindowDimensions,
 } from '../../lib/dom';
 import SimpleKeyframe from '../SimpleKeyframe';
 import { standard, accelerate } from '../../lib/curves';
 import { zIndexStack } from '../../lib/style';
+import { dynamic } from '../../lib/duration';
+import { Duration } from '../types';
 
 export interface CircleExpandProps extends CollectorChildrenProps {
   /**
@@ -24,7 +27,7 @@ export interface CircleExpandProps extends CollectorChildrenProps {
   /**
    * How long the animation should take over {duration}ms.
    */
-  duration: number;
+  duration: Duration;
 
   /**
    * zIndex to be applied to the moving element.
@@ -43,48 +46,54 @@ export interface CircleExpandProps extends CollectorChildrenProps {
  */
 export default class CircleExpand extends React.Component<CircleExpandProps> {
   static defaultProps = {
-    duration: 500,
+    duration: 'dynamic',
     zIndex: zIndexStack.circleExpand,
   };
 
   renderAnimation = (data: AnimationData, options: { step?: number; onFinish: () => void }) => {
     const { duration, background, zIndex } = this.props;
 
     // Scroll could have changed between unmount and this prepare step, let's recalculate just in case.
-    const fromTargetSizeLocation = recalculateElementBoundingBoxFromScroll(
+    const originBoundingBox = recalculateElementBoundingBoxFromScroll(
       data.origin.elementBoundingBox
     );
-    const minSize = Math.min(fromTargetSizeLocation.size.width, fromTargetSizeLocation.size.height);
-    const fromTargetHypotenuse = calculateHypotenuse(fromTargetSizeLocation.size);
-    const fromTargetCenterInViewport = calculateElementCenterInViewport(fromTargetSizeLocation);
+    const minSize = Math.min(originBoundingBox.size.width, originBoundingBox.size.height);
+    const fromTargetHypotenuse = calculateHypotenuse(originBoundingBox.size);
+    const fromTargetCenterInViewport = calculateElementCenterInViewport(originBoundingBox);
     const viewportCenter = calculateWindowCentre();
-    const windowHypotenuse = calculateHypotenuse({
-      width: window.innerWidth,
-      height: window.innerHeight,
-    });
+    const windowDimensions = getWindowDimensions();
+    const windowHypotenuse = calculateHypotenuse(windowDimensions);
     const difference = {
       width: viewportCenter.left - fromTargetCenterInViewport.left,
       height: viewportCenter.top - fromTargetCenterInViewport.top,
     };
     const hypotenuseDifference = calculateHypotenuse(difference);
     const scale = Math.ceil((windowHypotenuse + hypotenuseDifference) / minSize);
+    const calculatedDuration =
+      duration === 'dynamic'
+        ? dynamic(originBoundingBox, {
+            location: { left: 0, top: 0 },
+            size: windowDimensions,
+            raw: {} as any,
+          })
+        : duration;
 
     return (
       <SimpleKeyframe
         style={{
           zIndex,
           left:
-            fromTargetSizeLocation.location.left -
-            (fromTargetHypotenuse - fromTargetSizeLocation.size.width) / 2,
+            originBoundingBox.location.left -
+            (fromTargetHypotenuse - originBoundingBox.size.width) / 2,
           top:
-            fromTargetSizeLocation.location.top -
-            (fromTargetHypotenuse - fromTargetSizeLocation.size.height) / 2,
+            originBoundingBox.location.top -
+            (fromTargetHypotenuse - originBoundingBox.size.height) / 2,
           width: fromTargetHypotenuse,
           height: fromTargetHypotenuse,
           borderRadius: '50%',
           position: 'absolute',
           background,
-          transition: `transform ${accelerate()} ${duration}ms, opacity ${standard()} ${duration /
+          transition: `transform ${accelerate()} ${calculatedDuration}ms, opacity ${standard()} ${calculatedDuration /
             2}ms`,
           transform: 'scale(1)',
           willChange: 'transform',

packages/yubaba/src/animations/CircleShrink/index.tsx

@@ -6,10 +6,16 @@ import Collector, {
   AnimationData,
 } from '../../Collector';
 import { calculateHypotenuse } from '../../lib/math';
-import { calculateWindowCentre, calculateElementCenterInViewport } from '../../lib/dom';
+import {
+  calculateWindowCentre,
+  calculateElementCenterInViewport,
+  getWindowDimensions,
+} from '../../lib/dom';
 import SimpleKeyframe from '../SimpleKeyframe';
 import { standard, decelerate } from '../../lib/curves';
 import { zIndexStack } from '../../lib/style';
+import { dynamic } from '../../lib/duration';
+import { Duration } from '../types';
 
 export interface CircleShrinkProps extends CollectorChildrenProps {
   /**
@@ -20,7 +26,7 @@ export interface CircleShrinkProps extends CollectorChildrenProps {
   /**
    * How long the animation should take over {duration}ms.
    */
-  duration: number;
+  duration: Duration;
 
   /**
    * zIndex to be applied to the moving element.
@@ -39,7 +45,7 @@ export interface CircleShrinkProps extends CollectorChildrenProps {
  */
 export default class CircleShrink extends React.Component<CircleShrinkProps> {
   static defaultProps = {
-    duration: 500,
+    duration: 'dynamic',
     zIndex: zIndexStack.circleShrink,
   };
 
@@ -55,16 +61,22 @@ export default class CircleShrink extends React.Component<CircleShrinkProps> {
       data.destination.elementBoundingBox
     );
     const viewportCenter = calculateWindowCentre();
-    const windowHypotenuse = calculateHypotenuse({
-      width: window.innerWidth,
-      height: window.innerHeight,
-    });
+    const windowDimensions = getWindowDimensions();
+    const windowHypotenuse = calculateHypotenuse(windowDimensions);
     const difference = {
       width: viewportCenter.left - toTargetCenterInViewport.left,
       height: viewportCenter.top - toTargetCenterInViewport.top,
     };
     const hypotenuseDifference = calculateHypotenuse(difference);
     const scale = Math.ceil((windowHypotenuse + hypotenuseDifference) / minSize);
+    const calculatedDuration =
+      duration === 'dynamic'
+        ? dynamic(data.destination.elementBoundingBox, {
+            location: { left: 0, top: 0 },
+            size: windowDimensions,
+            raw: {} as any,
+          })
+        : duration;
 
     return (
       <SimpleKeyframe
@@ -82,7 +94,7 @@ export default class CircleShrink extends React.Component<CircleShrinkProps> {
           position: 'absolute',
           background,
           willChange: 'transform',
-          transition: `transform ${decelerate()} ${duration}ms, opacity ${standard()} ${duration}ms`,
+          transition: `transform ${decelerate()} ${calculatedDuration}ms, opacity ${standard()} ${calculatedDuration}ms`,
           transform: `scale(${scale})`,
         }}
         keyframes={[

packages/yubaba/src/animations/ConcealMove/index.tsx

@@ -10,12 +10,14 @@ import { recalculateElementBoundingBoxFromScroll } from '../../lib/dom';
 import noop from '../../lib/noop';
 import { standard } from '../../lib/curves';
 import { zIndexStack } from '../../lib/style';
+import { dynamic } from '../../lib/duration';
+import { Duration } from '../types';
 
 export interface ConcealMoveProps extends CollectorChildrenProps {
   /**
    * How long the animation should take over {duration}ms.
    */
-  duration: number;
+  duration: Duration;
 
   /**
    * zIndex to be applied to the moving element.
@@ -37,11 +39,13 @@ export interface ConcealMoveProps extends CollectorChildrenProps {
  */
 export default class ConcealMove extends React.Component<ConcealMoveProps> {
   static defaultProps = {
-    duration: 500,
+    duration: 'dynamic',
     timingFunction: standard(),
     zIndex: zIndexStack.concealMove,
   };
 
+  calculatedDuration: number = 0;
+
   renderAnimation = (
     data: AnimationData,
     options: { moveToTarget?: boolean; fadeOut?: boolean } = {}
@@ -56,14 +60,20 @@ targetElement was missing.`);
     const fromTargetSizeLocation = recalculateElementBoundingBoxFromScroll(
       data.origin.elementBoundingBox
     );
+    this.calculatedDuration =
+      duration === 'dynamic'
+        ? dynamic(fromTargetSizeLocation, data.destination.elementBoundingBox)
+        : duration;
 
     return data.origin.render({
       ref: noop,
       style: {
         zIndex,
         opacity: options.fadeOut ? 0 : 1,
-        transition: `transform ${duration}ms ${timingFunction}, height ${duration}ms ${timingFunction}, width ${duration}ms ${timingFunction}, opacity ${duration /
-          2}ms ${timingFunction}`,
+        transition: `transform ${this.calculatedDuration}ms ${timingFunction}, height ${
+          this.calculatedDuration
+        }ms ${timingFunction}, width ${this.calculatedDuration}ms ${timingFunction}, opacity ${this
+          .calculatedDuration / 2}ms ${timingFunction}`,
         position: 'absolute',
         transformOrigin: '0 0',
         willChange: 'transform, height, width',
@@ -85,7 +95,7 @@ targetElement was missing.`);
       className: options.moveToTarget
         ? css`
             > * {
-              transition: transform ${duration}ms ${timingFunction};
+              transition: transform ${this.calculatedDuration}ms ${timingFunction};
               transform: translate3d(
                 -${data.origin.focalTargetElementBoundingBox.location.left - data.origin.elementBoundingBox.location.left}px,
                 -${data.origin.focalTargetElementBoundingBox.location.top - data.origin.elementBoundingBox.location.top}px,
@@ -103,9 +113,7 @@ targetElement was missing.`);
   };
 
   animate: AnimationCallback = (data, onFinish) => {
-    const { duration } = this.props;
-
-    setTimeout(onFinish, duration);
+    setTimeout(onFinish, this.calculatedDuration);
 
     return this.renderAnimation(data, { moveToTarget: true });
   };

packages/yubaba/src/animations/FadeMove/index.tsx

@@ -10,12 +10,14 @@ import { recalculateElementBoundingBoxFromScroll } from '../../lib/dom';
 import noop from '../../lib/noop';
 import { standard } from '../../lib/curves';
 import { zIndexStack } from '../../lib/style';
+import { dynamic } from '../../lib/duration';
+import { Duration } from '../types';
 
 export interface FadeMoveProps extends CollectorChildrenProps {
   /**
    * How long the animation should take over {duration}ms.
    */
-  duration: number;
+  duration: Duration;
 
   /**
    * zIndex to be applied to the moving element.
@@ -42,11 +44,13 @@ export interface FadeMoveProps extends CollectorChildrenProps {
  */
 export default class FadeMove extends React.Component<FadeMoveProps> {
   static defaultProps = {
-    duration: 500,
+    duration: 'dynamic',
     timingFunction: standard(),
     zIndex: zIndexStack.fadeMove,
   };
 
+  calculatedDuration: number = 0;
+
   renderAnimation = (data: AnimationData, options: { moveToTarget?: boolean } = {}) => {
     const { timingFunction, duration, zIndex } = this.props;
     // Scroll could have changed between unmount and this prepare step, let's recalculate
@@ -58,14 +62,18 @@ export default class FadeMove extends React.Component<FadeMoveProps> {
       data.destination.elementBoundingBox.location.left - fromTargetSizeLocation.location.left;
     const fromEndYOffset =
       data.destination.elementBoundingBox.location.top - fromTargetSizeLocation.location.top;
+    this.calculatedDuration =
+      duration === 'dynamic'
+        ? dynamic(fromTargetSizeLocation, data.destination.elementBoundingBox)
+        : duration;
 
     return data.origin.render({
       ref: noop,
       style: {
         ...fromTargetSizeLocation.location,
         zIndex,
-        transition: `transform ${duration}ms ${timingFunction}, opacity ${duration /
-          2}ms ${timingFunction}`,
+        transition: `transform ${this.calculatedDuration}ms ${timingFunction}, opacity ${this
+          .calculatedDuration / 2}ms ${timingFunction}`,
         position: 'absolute',
         transformOrigin: '0 0',
         transform: 'translate3d(0, 0, 0) scale3d(1, 1, 1)',
@@ -96,8 +104,7 @@ export default class FadeMove extends React.Component<FadeMoveProps> {
   };
 
   animate: AnimationCallback = (data, onFinish) => {
-    const { duration } = this.props;
-    setTimeout(onFinish, duration);
+    setTimeout(onFinish, this.calculatedDuration);
     return this.renderAnimation(data, { moveToTarget: true });
   };
 

packages/yubaba/src/animations/Move/index.tsx

@@ -8,12 +8,14 @@ import * as math from '../../lib/math';
 import { recalculateElementBoundingBoxFromScroll } from '../../lib/dom';
 import { standard } from '../../lib/curves';
 import { combine, zIndexStack } from '../../lib/style';
+import { Duration } from '../types';
+import { dynamic } from '../../lib/duration';
 
 export interface MoveProps extends CollectorChildrenProps {
   /**
    * How long the animation should take over {duration}ms.
    */
-  duration: number;
+  duration: Duration;
 
   /**
    * zIndex to be applied to the moving element.
@@ -58,7 +60,7 @@ export interface MoveProps extends CollectorChildrenProps {
  */
 export default class Move extends React.Component<MoveProps> {
   static defaultProps = {
-    duration: 500,
+    duration: 'dynamic',
     timingFunction: standard(),
     zIndex: zIndexStack.move,
     useFocalTarget: false,
@@ -108,20 +110,26 @@ targetElement was missing.`);
     onFinish();
   };
 
-  animate: AnimationCallback = (_, onFinish, setChildProps) => {
+  animate: AnimationCallback = (data, onFinish, setChildProps) => {
     const { duration, timingFunction } = this.props;
 
+    const calculatedDuration =
+      duration === 'dynamic'
+        ? dynamic(data.origin.elementBoundingBox, data.destination.elementBoundingBox)
+        : duration;
+
     setChildProps({
       style: prevStyles => ({
         ...prevStyles,
         transition: combine(
-          `transform ${duration}ms ${timingFunction}, opacity ${duration / 2}ms ${timingFunction}`
+          `transform ${calculatedDuration}ms ${timingFunction}, opacity ${calculatedDuration /
+            2}ms ${timingFunction}`
         )(prevStyles.transition),
         transform: 'translate3d(0, 0, 0) scale3d(1, 1, 1)',
       }),
     });
 
-    setTimeout(() => onFinish(), duration);
+    setTimeout(() => onFinish(), calculatedDuration);
   };
 
   render() {