You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+16-20Lines changed: 16 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -22,22 +22,32 @@ Spend as little time as possible learning a library's API and trying to implemen
22
22
23
23
1.**react-transition-group & animejs**
24
24
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.
26
26
* Animejs is lightweight and open source, and I find the imperative API more intuitive than the typical React approach for multiple complex animations.
* 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.
* 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.
*[React transition group docs](http://reactcommunity.org/react-transition-group/)
38
48
*[GSAP docs](https://greensock.com/docs)
39
49
40
-
3.**react-spring**
50
+
4.**react-spring**
41
51
42
52
* This newcomer melds the powers of `react-motion` and `react-animated` into one user-friendly library (and the docs have tons of cool examples).
43
53
* 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
* 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.
* 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.
60
70
* 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.
* 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.
68
78
*[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)
* 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.
0 commit comments