update react-spring example

Author: aholachek

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
  indent: ['error', 2],
  'linebreak-style': ['error', 'unix'],
  quotes: ['error', 'single'],
- semi: ['error', 'never']
+ semi: ['error', 'never'],
+ 'react/prop-types': 0
  }
 }

.storybook/config.js

@@ -1,6 +1,7 @@
 import { configure } from '@storybook/react';
 import '@storybook/addon-options/register';
 import { setOptions } from '@storybook/addon-options';
+import { setConfig } from 'react-hot-loader';
 
 setOptions({
  name: 'React Animation Libraries',
@@ -17,3 +18,5 @@ function loadStories() {
 }
 
 configure(loadStories, module);
+
+setConfig({ pureSFC: true });

README.md

@@ -1,88 +1,95 @@
-# What's the most developer-friendly React animation library?
+### 🚨 Updated for 2019
 
-### The Goal: to replicate this animation on entering and exiting react components:
+# What's the most powerful and developer-friendly React animation library?
 
-![example animation](./src/assets/react-animation-comparison.gif)
+### The Task: Replicate this animation in React
 
-1. Initially, when it is first rendered in React, the grid should animate in, followed by the staggered animation of its children cards.
-2. New cards can be added individually to the cards array and should be animated in.
-3. Cards can be removed from the cards array and should be animated out as they leave.
-4. When the grid is removed from the DOM, it should wait for its children to animate out before animating itself and leaving the DOM
+![example animation](./src/assets/comparison.gif)
+
+Here's a rundown of what should happen (it's more complex than it appears at first glance!)
+
+1. When it's first rendered in React, the grid component should animate in, followed by the staggered animation of its child, a list of cards.
+2. New cards can be added individually to the cards array, and should be animated in.
+3. Individual cards can also be removed from the cards array, and should be animated out as they leave.
+4. When the grid component is unmounted, it should wait for its children to animate out before animating itself and leaving the DOM.
 5. In-progress animations should be appropriately cancelled if the enter/exit state is toggled rapidly.
-6. _Stretch goal_: When shuffled, the cards should smoothly transition to their new positions.
+6. If the cards were shuffled, they should still animate out with the expected staggered order.
 
 ### Why It's Hard
-The example sequences the "enter" and "exit" animations of both a parent and its child elements, requiring coordination between different components. Not only that, but the enter and exit animations are not simple mirrors of each other (as many libraries expect). The positions of the grid and cards should be animated with a slightly gooey-feeling elastic easing, but opacity changes should have a linear easing. The cards animating in and out are initially staggered, but adding or removing cards one-by-one should also result in a fluid animation with no delay.
 
-### The Arbitrary Limit:
-Spend as little time as possible learning a library's API and trying to implement the animation.
+1. The sequenced "enter" and "exit" animations of both a parent and its child requires coordination between different components.
+2. The enter and exit animations are not simple mirrors of each other, as some libraries expect.
+3. The positions of the grid and cards should be animated with a spring (or, failing that, with an elastic easing), while opacity changes should have a linear easing
+4. The cards animating in and out are initially staggered, but adding or removing cards one-by-one should result in a fluid animation with no delay.
+5. Toggling the example rapidly should not create a broken view— cancelled animations should be cleaned up and there shouldn't be any straggler DOM elements left behind.
 
 ### The Results, Ordered by Preference
 
-1. 🥇 **react-transition-group & animejs**
-
-* Using `react-transition-group` and a JavaScript animation library ended up being my favorite technique, because it offered the flexibility to make custom, sequenced transitions.
-* `Animejs` is lightweight and open source, and I find the imperative API more intuitive than the typical React approach for multiple complex animations.
-* [my animation attempt](https://alex.holachek.com/react-animation-comparison/?selectedKind=Animation%20Examples&selectedStory=React-Transition-Group%20%2B%20animejs&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
-* [my code](https://github.com/aholachek/react-animation-comparison/blob/master/src/react-transition-group-anime-example.js)
-* [React transition group docs](http://reactcommunity.org/react-transition-group/)
-* [Anime docs](https://github.com/juliangarnier/anime)
-
-2. 🥈 **react-pose**
-* This was the easiest example to get up and running.
-* The automatic FLIP animations are pretty cool (try shuffling the cards to see it in action), and the default easings made the animations look great.
-* I liked how the library automatically applies transitions to DOM elements for you instead of just tweening values and making you handle the style updates yourself.
-* The docs are good.
-* 🐛 **Bug** Interrupted repeat animations are implemented incorrectly (extra ghost elements are animated in if the previous animation did not fully complete). Try toggling the example multiple times fairly quickly to see what I mean.
-* 🐛 **Bug** Shuffling the cards will result in an out-of-order staggered exit transition.
-* This would have been my #1 choice were it not for the bugs.
-* [my animation attempt](https://alex.holachek.com/react-animation-comparison/?selectedKind=Animation%20Examples&selectedStory=Popmotion%20Pose&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
-* [my code](https://github.com/aholachek/react-animation-comparison/blob/master/src/popmotion-pose-example.js)
-* [Popmotion Pose docs](https://popmotion.io/pose/)
-
-3. 🥉 **react-transition-group & gsap**
-
-* Basically the same as the `animejs` example, just with the animation library swapped out. `GSAP` has a less permissive license and it's older and heavier than `animejs`, but it's battle-tested and powerful.
-* [my animation attempt](https://alex.holachek.com/react-animation-comparison/?selectedKind=Animation%20Examples&selectedStory=React-Transition-Group%20%2B%20GSAP&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
-* [my code](https://github.com/aholachek/react-animation-comparison/blob/master/src/react-transition-group-gsap-example.js)
-* [React transition group docs](http://reactcommunity.org/react-transition-group/)
-* [GSAP docs](https://greensock.com/docs)
-
-4. **react-spring**
-
-* This newcomer melds the powers of `react-motion` and `react-animated` into one library (and the docs have tons of cool examples).
-* `React-spring`'s keyframes API, which I used in my example to sequence animations makes great use of async/await but is marked as experimental in the docs.
-* 🐛 **Bug** There is a serious, window-crashing memory leak created when adding new cards, though this could be something I'm doing incorrectly.
-* I couldn't quite get the whole thing working the way I wanted to.
-* [my animation attempt](https://alex.holachek.com/react-animation-comparison/?selectedKind=Animation%20Examples&selectedStory=React-Spring&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
-* [my code](https://github.com/aholachek/react-animation-comparison/blob/master/src/react-spring-example.js)
-* [react-spring docs](https://github.com/drcmda/react-spring)
+1. 🥇 **react-transition-group & animejs**
+
+- Using `react-transition-group` and a JavaScript animation library ended up being my favorite technique, because it offers total flexibility and control, at the cost of additional complexity.
+- `Animejs` is lightweight and open source, and I find the imperative API more intuitive than the typical React approach for coordinated, complex animations.
+- [my animation attempt](https://alex.holachek.com/react-animation-comparison/?selectedKind=Animation%20Examples&selectedStory=React-Transition-Group%20%2B%20animejs&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
+- [my code](https://github.com/aholachek/react-animation-comparison/blob/master/src/react-transition-group-anime-example.js)
+- [React transition group docs](http://reactcommunity.org/react-transition-group/)
+- [Anime docs](https://github.com/juliangarnier/anime)
+
+1. 🥈 **react-spring**
+
+- If you'd prefer to use a React-specific library, I recommend `react-spring`.
+- The library's use of the hooks API is very concise and expressive -- it took only about 70 lines of code to implement the example!
+- The library is in active development and supports a wide variety of use cases.
+- I was unable to get the cards to animate in and out in opposite directions, but that is a minor limitation.
+- [my animation attempt](https://alex.holachek.com/react-animation-comparison/?selectedKind=Animation%20Examples&selectedStory=React-Spring&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
+- [my code](https://github.com/aholachek/react-animation-comparison/blob/master/src/react-spring-example.js)
+- [react-spring docs](https://react-spring.surge.sh/)
+
+1. 🥉 **react-pose**
+
+- A year ago, this was my favorite option, but now the number of bugs make me hesitant to recommend it.
+- The good:
+ - the library API is very user friendly.
+ - I liked how the library automatically applies transitions to DOM elements for you instead of just tweening values and making you handle the style updates yourself.
+- The bad (bugs):
+ - Interrupted repeat animations are implemented incorrectly (extra ghost elements are animated in if the previous animation did not fully complete). Try toggling the example multiple times fairly quickly to see what I mean. [Link to issue](https://github.com/Popmotion/popmotion/issues/318)
+ - Shuffling the cards will result in an out-of-order staggered exit transition. [Link to issue](https://github.com/Popmotion/popmotion/issues/319)
+ - (Introduced in v4): Individual card animations no longer work correctly.
+
+- [my animation attempt](https://alex.holachek.com/react-animation-comparison/?selectedKind=Animation%20Examples&selectedStory=Popmotion%20Pose&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
+- [my code](https://github.com/aholachek/react-animation-comparison/blob/master/src/popmotion-pose-example.js)
+- [Popmotion Pose docs](https://popmotion.io/pose/)
+
+4. 🥉 **react-transition-group & gsap**
+
+- Basically the same as the `animejs` example, just with the animation library swapped out. `GSAP` has a less permissive license and it's older and heavier than `animejs`, but it's battle-tested and powerful.
+- [my animation attempt](https://alex.holachek.com/react-animation-comparison/?selectedKind=Animation%20Examples&selectedStory=React-Transition-Group%20%2B%20GSAP&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
+- [my code](https://github.com/aholachek/react-animation-comparison/blob/master/src/react-transition-group-gsap-example.js)
+- [React transition group docs](http://reactcommunity.org/react-transition-group/)
+- [GSAP docs](https://greensock.com/docs)
 
 5. **react-move**
 
-* A lightweight library that helps `D3` and `React` work together. It ended up not being quite flexible enough for the needs of this task, though if the demo featured more traditionally D3-like interactions it would have been great.
-* [my animation attempt](https://alex.holachek.com/react-animation-comparison/?selectedKind=Animation%20Examples&selectedStory=React-Move&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
-* [my code](https://github.com/aholachek/react-animation-comparison/blob/master/src/react-move-example.js)
-* [react-move docs](https://react-move-example.js.org/#/)
+- A lightweight library that helps `D3` and `React` work together. It ended up not being quite flexible enough for the needs of this task, though if the demo featured more traditionally D3-like interactions it would have been great.
+- [my animation attempt](https://alex.holachek.com/react-animation-comparison/?selectedKind=Animation%20Examples&selectedStory=React-Move&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
+- [my code](https://github.com/aholachek/react-animation-comparison/blob/master/src/react-move-example.js)
+- [react-move docs](https://react-move-example.js.org/#/)
 
 6. **velocity-react**
 
-* A straightforward option that got me far but then ended up tripping me up when it came time to get the nested leave animations working.
-* At one point, this library might have been one of the better options for animating in React, but now with `popmotion-pose`, `react-spring`, and `react-transition-group v2` there are more powerful, updated alternatives with better documentation.
-* [my animation attempt](https://alex.holachek.com/react-animation-comparison/?selectedKind=Animation%20Examples&selectedStory=Velocity-React&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
-* [my code](https://github.com/aholachek/react-animation-comparison/blob/master/src/velocity-react-example.js)
-* [velocity-react docs](https://github.com/google-fabric/velocity-react)
-
-7. **react-motion**
+- A straightforward option that got me far but then ended up tripping me up when it came time to get the nested leave animations working.
+- At one point, this library might have been one of the better options for animating in React, but now with `react-spring`, `popmotion-pose`, and `react-transition-group v2` there are more powerful, updated alternatives with better documentation.
+- [my animation attempt](https://alex.holachek.com/react-animation-comparison/?selectedKind=Animation%20Examples&selectedStory=Velocity-React&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
+- [my code](https://github.com/aholachek/react-animation-comparison/blob/master/src/velocity-react-example.js)
+- [velocity-react docs](https://github.com/google-fabric/velocity-react)
 
-* An hour and a half wasn't enough time for me to understand the intricacies of this physics-based animation library and to create the example animation.
-* [my sad animation attempt](https://alex.holachek.com/react-animation-comparison/?selectedKind=Animation%20Examples&selectedStory=React-Motion&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
-* [my code](https://github.com/aholachek/react-animation-comparison/blob/master/src/react-motion-example.js)
-* [react motion docs](https://github.com/chenglou/react-motion)
+1. **react-motion**
 
+- I found this library very difficult to use when implementing the example.
+- [my sad animation attempt](https://alex.holachek.com/react-animation-comparison/?selectedKind=Animation%20Examples&selectedStory=React-Motion&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)
+- [my code](https://github.com/aholachek/react-animation-comparison/blob/master/src/react-motion-example.js)
+- [react motion docs](https://github.com/chenglou/react-motion)
 
 ## Run the project locally
 
 1. `yarn` or `npm install`
 2. `yarn start` or `npm start`
-

package.json

@@ -2,23 +2,21 @@
  "name": "react-animation-comparison",
  "version": "0.2.0",
  "dependencies": {
- "@storybook/addon-options": "^3.4.3",
- "animejs": "^2.2.0",
+ "animejs": "^3.0.1",
  "d3-ease": "^1.0.3",
  "delay": "^2.0.0",
  "gsap": "^1.19.1",
  "normalize.css": "^8.0.0",
- "popmotion": "^8.1.22",
+ "popmotion": "^8.6.2",
  "prop-types": "^15.6.1",
- "react": "^16.3.2",
- "react-dom": "^16.3.2",
+ "react": "16.8.1",
+ "react-dom": "16.8.1",
  "react-motion": "^0.5.0",
- "react-move": "^2.7.0",
- "react-pose": "^3.1.0",
- "react-scripts": "1.1.4",
- "react-spring": "^5.1.1",
- "react-transition-group": "^2.3.1",
- "storybook-readme": "^2.0.2",
+ "react-move": "^5.1.0",
+ "react-pose": "^4.0.5",
+ "react-scripts": "2.1.3",
+ "react-spring": "^8.0.5",
+ "react-transition-group": "^2.5.2",
  "velocity-animate": "^1.5.0",
  "velocity-react": "^1.4.1"
  },
@@ -29,10 +27,15 @@
  "deploy-storybook": "storybook-to-ghpages"
  },
  "devDependencies": {
- "@storybook/addon-actions": "^3.4.3",
- "@storybook/addon-links": "^3.4.3",
- "@storybook/react": "^3.4.3",
+ "@babel/core": "^7.2.2",
+ "@storybook/addon-actions": "^4.1.6",
+ "@storybook/addon-links": "^4.1.6",
+ "@storybook/addon-options": "^4.1.11",
+ "@storybook/react": "^4.1.11",
  "@storybook/storybook-deployer": "^2.3.0",
- "prettier": "1.14.2"
+ "babel-loader": "^8.0.5",
+ "prettier": "1.14.2",
+ "react-hot-loader": "^4.6.3",
+ "storybook-readme": "^4.0.5"
  }
 }

src/assets/comparison.gif

@@ -1,5 +1,5 @@
-import React, { Component } from "react"
-import shuffle from "./shuffle"
+import React, { Component } from 'react'
+import shuffle from './shuffle'
 
 export default class Container extends Component {
  state = {
@@ -22,15 +22,17 @@ export default class Container extends Component {
  }
 
  removeItem = itemToRemove => {
- const items = this.state.items.filter(item => item !== itemToRemove)
- this.setState({ items })
+ this.setState(({ items }) => ({
+ items: items.filter(item => item !== itemToRemove)
+ }))
  }
 
  shuffleItems = () => {
  this.setState({ items: [...shuffle(this.state.items)] })
  }
 
  render() {
+ const { animationComponent: AnimationComponent } = this.props
  return (
  <div className="p-4">
  <div>
@@ -53,12 +55,12 @@ export default class Container extends Component {
  )}
  </div>
  <div>
- {this.props.render({
- items: this.state.items,
- visible: this.state.visible,
- addItem: this.addItem,
- removeItem: this.removeItem
- })}
+ <AnimationComponent
+ items={this.state.items}
+ visible={this.state.visible}
+ addItem={this.addItem}
+ removeItem={this.removeItem}
+ />
  </div>
  </div>
  )

src/assets/react-animation-comparison.gif

@@ -41,7 +41,7 @@ const Grid = posed.ul(GridProps)
 
 const itemProps = {
  preEnter: {
- y: -50,
+ y: -30,
  opacity: 0,
  transition: { type: 'spring' }
  },
@@ -51,7 +51,7 @@ const itemProps = {
  transition: { type: 'spring' }
  },
  exit: {
- y: -50,
+ y: -30,
  opacity: 0,
  transition: { type: 'spring' }
  }

src/common/container.js

@@ -115,4 +115,4 @@ class TransitionGrid extends Component {
  }
 }
 
-export default props => <TransitionGrid {...props} />
+export default TransitionGrid