Animate: Implement AnimeJS

config/jsdomPolyfills.js

@@ -0,0 +1,27 @@
+'use strict'
+
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+
+// MIT license
+
+let lastTime = 0;
+if (!window.requestAnimationFrame)
+  window.requestAnimationFrame = function(callback, element) {
+    const currTime = new Date().getTime();
+    const timeToCall = Math.max(0, 16 - (currTime - lastTime));
+    const id = window.setTimeout(function() { callback(currTime + timeToCall); },
+      timeToCall);
+    lastTime = currTime + timeToCall;
+    return id;
+  };
+
+if (!window.cancelAnimationFrame)
+  window.cancelAnimationFrame = function(id) {
+    clearTimeout(id);
+  };
+
+if (!window.SVGElement)
+  window.SVGElement = window.Element

package.json

@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "@shopify/javascript-utilities": "2.0.0",
+    "animejs": "2.2.0",
     "emoji-mart": "^1.0.1",
     "lodash.includes": "4.3.0",
     "object-assign": "4.1.1",
@@ -168,7 +169,8 @@
       "!src/components/index.js"
     ],
     "setupFiles": [
-      "<rootDir>/config/polyfills.js"
+      "<rootDir>/config/polyfills.js",
+      "<rootDir>/config/jsdomPolyfills.js"
     ],
     "testMatch": [
       "<rootDir>/src/**/__tests__/**/*.js?(x)",

scripts/test.js

@@ -8,9 +8,9 @@ process.env.PUBLIC_URL = ''
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err
-})
+// process.on('unhandledRejection', err => {
+//   throw err
+// })
 
 // Ensure environment variables are read.
 require('../config/env')

src/components/Alert/index.js

@@ -1,6 +1,7 @@
 import React, {PureComponent as Component} from 'react'
 import PropTypes from 'prop-types'
 import Badge from '../Badge'
+import Animate from '../Animate'
 import Collapsible from '../Collapsible'
 import CloseButton from '../CloseButton'
 import Icon from '../Icon'
@@ -121,7 +122,9 @@ class Alert extends Component {
 
     return dismissible ? (
       <Collapsible duration={200} isOpen={!dismissed}>
-        {componentMarkup}
+        <Animate in={!dismissed} sequence={['fade']} duration={100}>
+          {componentMarkup}
+        </Animate>
       </Collapsible>
     ) : componentMarkup
   }

src/components/Animate/README.md

@@ -8,7 +8,7 @@ An Animate component is a wrapper component that provides CSS-based animations.
 ##### Fade in animation
 
 ```jsx
-<Animate sequence='fadeIn'>
+<Animate sequence='fade'>
   <Avatar name="Will Ferrell" image="will.png" />
 </Animate>
 ```
@@ -19,16 +19,17 @@ An Animate component is a wrapper component that provides CSS-based animations.
 | Prop | Type | Description |
 | --- | --- | --- |
 | animateOnMount | `bool` | Automatically animates when component is rendered. Default is `true` |
+| block | `bool` | Applies `display: block` to the component. |
 | className | `string` | Custom class names to be added to the component. |
-| in | `bool` | Programatically triggering the animation. |
 | duration | `number` | The duration (in `ms`) for the animation sequence. |
+| in | `bool` | Programatically triggering the animation. |
+| inline | `bool` | Applies `display: inline` to the component. |
+| inlineBlock | `bool` | Applies `display: inline-block` to the component. |
+| onEnter | `function` | Callback before the component's `enter` animation sequence. |
+| onEntering | `function` | Callback during the component's `enter` animation sequence. |
+| onEntered | `function` | Callback after the component's `enter` animation sequence. |
+| onExit | `function` | Callback before the component's `exit` animation sequence. |
+| onExiting | `function` | Callback during the component's `exit` animation sequence. |
+| onExit | `function` | Callback after the component's `exit` animation sequence. |
 | sequence | `string` | Names of animation styles to apply. |
-| wait | `number` | The duration (in `ms`) to apply/remove the animations. |
-
-
-## Sequences
-
-| Name | Description |
-| --- | --- |
-| `down` | Animates component down into it's natural position. |
-| `fadeIn` | Fades the component into view. |
+| wait | `object`/`number` | The duration (in `ms`) to apply/remove the animations. |

src/components/Animate/animations/down.js

@@ -0,0 +1,10 @@
+const amount = -24
+
+export default {
+  onEntering: {
+    translateY: [amount, 0]
+  },
+  onExiting: {
+    translateY: [0, amount]
+  }
+}

src/components/Animate/animations/downSmall.js

@@ -0,0 +1,10 @@
+const amount = -12
+
+export default {
+  onEntering: {
+    translateY: [amount, 0]
+  },
+  onExiting: {
+    translateY: [0, amount]
+  }
+}

src/components/Animate/animations/fade.js

@@ -0,0 +1,13 @@
+export default {
+  onMount: {
+    opacity: 0
+  },
+  onEnter: {
+    easing: 'linear',
+    opacity: [0, 1]
+  },
+  onExit: {
+    easing: 'linear',
+    opacity: [1, 0]
+  }
+}

src/components/Animate/animations/index.js

@@ -0,0 +1,19 @@
+import down from './down'
+import downSmall from './downSmall'
+import fade from './fade'
+import left from './left'
+import right from './right'
+import scale from './scale'
+import scaleBig from './scaleBig'
+import up from './up'
+
+export default {
+  down,
+  downSmall,
+  fade,
+  left,
+  right,
+  scale,
+  scaleBig,
+  up
+}

src/components/Animate/animations/left.js

@@ -0,0 +1,10 @@
+const amount = -24
+
+export default {
+  onEntering: {
+    translateX: [amount, 0]
+  },
+  onExiting: {
+    translateX: [0, amount]
+  }
+}

src/components/Animate/animations/right.js

@@ -0,0 +1,10 @@
+const amount = -24
+
+export default {
+  onEntering: {
+    translateX: [0, amount]
+  },
+  onExiting: {
+    translateX: [amount, 0]
+  }
+}

src/components/Animate/animations/scale.js

@@ -0,0 +1,8 @@
+export default {
+  onEntering: {
+    scale: [0.9, 1]
+  },
+  onExiting: {
+    scale: [1, 0.9]
+  }
+}

src/components/Animate/animations/scaleBig.js

@@ -0,0 +1,11 @@
+export default {
+  onMount: {
+    transform: 'scale(0)'
+  },
+  onEntering: {
+    scale: [0, 1]
+  },
+  onExiting: {
+    scale: [1, 0]
+  }
+}

src/components/Animate/animations/up.js

@@ -0,0 +1,10 @@
+const amount = -24
+
+export default {
+  onEntering: {
+    translateY: [0, amount]
+  },
+  onExiting: {
+    translateY: [amount, 0]
+  }
+}