Skip to content

Commit 15b43b9

Browse files
committed
update readme
1 parent 5ddc297 commit 15b43b9

File tree

1 file changed

+16
-20
lines changed

1 file changed

+16
-20
lines changed

README.md

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -22,22 +22,32 @@ Spend as little time as possible learning a library's API and trying to implemen
2222

2323
1. **react-transition-group & animejs**
2424

25-
* Using react-transition-group and a JavaScript animation library ended up being one of my favorite techniques, because it offered the flexibility to make custom, sequenced transitions.
25+
* 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.
2626
* Animejs is lightweight and open source, and I find the imperative API more intuitive than the typical React approach for multiple complex animations.
2727
* [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)
2828
* [the code](https://github.com/aholachek/react-animation-comparison/blob/master/src/react-transition-group-anime-example.js)
2929
* [React transition group docs](http://reactcommunity.org/react-transition-group/)
3030
* [Anime docs](https://github.com/juliangarnier/anime)
3131

32-
2. **react-transition-group & gsap**
32+
2. **react-pose**
33+
* In terms of pure ease of use and beginner-friendliness, this one was the winner for me.
34+
* 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.
35+
* 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.
36+
* The docs are good.
37+
* **Bug** Right now there is a bug in the way repeat animations are implemented (extra ghost elements are animated in), but hopefully that will be fixed soon.
38+
* [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)
39+
* [the code](https://github.com/aholachek/react-animation-comparison/blob/master/src/popmotion-pose-example.js)
40+
* [Popmotion Pose docs](https://popmotion.io/pose/)
41+
42+
3. **react-transition-group & gsap**
3343

3444
* 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.
3545
* [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)
3646
* [the code](https://github.com/aholachek/react-animation-comparison/blob/master/src/react-transition-group-gsap-example.js)
3747
* [React transition group docs](http://reactcommunity.org/react-transition-group/)
3848
* [GSAP docs](https://greensock.com/docs)
3949

40-
3. **react-spring**
50+
4. **react-spring**
4151

4252
* This newcomer melds the powers of `react-motion` and `react-animated` into one user-friendly library (and the docs have tons of cool examples).
4353
* React-spring's keyframes API, which I used in my example to sequence animations, is intuitive and makes great use of async/await but is marked as experimental in the docs.
@@ -47,39 +57,25 @@ Spend as little time as possible learning a library's API and trying to implemen
4757
* [the code](https://github.com/aholachek/react-animation-comparison/blob/master/src/react-spring-example.js)
4858
* [react-spring docs](https://github.com/drcmda/react-spring)
4959

50-
4. **react-move**
60+
5. **react-move**
5161

5262
* 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.
5363
* [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)
5464
* [the code](https://github.com/aholachek/react-animation-comparison/blob/master/src/react-move-example.js)
5565
* [react-move docs](https://react-move-example.js.org/#/)
5666

57-
5. **velocity-react**
67+
6. **velocity-react**
5868

5969
* 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.
6070
* 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.
6171
* [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)
6272
* [the code](https://github.com/aholachek/react-animation-comparison/blob/master/src/velocity-react-example.js)
6373
* [velocity-react docs](https://github.com/google-fabric/velocity-react)
6474

65-
6. **react-motion**
75+
7. **react-motion**
6676

6777
* 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.
6878
* [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)
6979
* [the code](https://github.com/aholachek/react-animation-comparison/blob/master/src/react-motion-example.js)
7080
* [react motion docs](https://github.com/chenglou/react-motion)
7181

72-
73-
### My favorite, pending resolution of some bugs
74-
75-
1. **react-pose**
76-
* In terms of pure ease of use, this one was the winner for me even though it suffered from some limitations (for instance, I couldn't get the grid's exit animation to go in the opposite direction of the enter animation)
77-
* 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.
78-
* 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.
79-
* The docs are good.
80-
* **Bugs** Right now there appear to be some serious bugs in the way repeat animations are implemented (extra ghost elements are animated in), as well as problems with the initial stagger animation, but I will update if that turns out to be a mistake I made in the implementation.
81-
* [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)
82-
* [the code](https://github.com/aholachek/react-animation-comparison/blob/master/src/popmotion-pose-example.js)
83-
* [Popmotion Pose docs](https://popmotion.io/pose/)
84-
85-

0 commit comments

Comments
 (0)