Hacker News new | ask | show | jobs
by tomhoad 2581 days ago
This looks promising, animations in React are a bit of a mess right now.

React-motion requires a PhD to figure out, and I'd rather stick pins in my eyes than use Transition Group.

I have had some moderate success with Popmotion, although I've also seen performance issues when staggering lists (likely down to my implementation rather than the library, but still).

6 comments

Try react-spring. It has a Hook-first API now, which is quite good. It's much less confusing, IMHO: https://www.react-spring.io/
I totally agree with you. This is why I built React SPHO (https://github.com/ismailman/react-spho). It handles animating auto, animating elements coming in or going out, etc. All the basic stuff you want to do (and some of the sophisticated stuff too) becomes super easy to accomplish.
If you have an example I can take a look at, I can investigate. The only performance issue I know of is when we unmount components in a PoseGroup when others are animating.
Thanks for your kind words! I built this because I want to solve simple animation in a simple way. In fact, there is no way I can compete with those big animation libraries out there, they offer tons of feature. React Simple Animat is more like a little tool to help on a simple animation task and require as less learning as possible.
I usually just animate with refs. When a React component root or its DOM children require complicated animations I will not allow them to update as per normal, just initially mount them and then animate via direct DOM manipulation.
>I'd rather stick pins in my eyes than use Transition Group

Why not? In combination with styled components it covers pretty much all my animation needs. The only thing missing is stagger for lists and maybe some way to integrate FLIP into it.

Pretty much because of staggering
I mean, stagger is trivial to implement with styled components, I only mentioned it because it's not out-of-box. Also what solution are you using that has stagger? I don't see it in pose docs, are you using popmotion-pure?