3 ms·

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 u

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).

iaml 7y ago
>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.
- tomhoad 7y ago
  Pretty much because of staggering
  - iaml 7y ago
    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?
    - tomhoad 7y ago
      https://popmotion.io/pose/learn/animating-children/#animating-children-scheduling-animations-staggerchildren https://popmotion.io/pose/learn/animating-children/#animatin...
SirHound 7y ago
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.
timdorr 7y ago
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/ https://www.react-spring.io/
darepublic 7y ago
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.
OmarIsmail 7y ago
I totally agree with you. This is why I built React SPHO (https://github.com/ismailman/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.
bluebill1049 7y ago
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.

iaml 7y ago

>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.

tomhoad 7y ago
Pretty much because of staggering
- iaml 7y ago
  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?
  - tomhoad 7y ago
    https://popmotion.io/pose/learn/animating-children/#animating-children-scheduling-animations-staggerchildren https://popmotion.io/pose/learn/animating-children/#animatin...

SirHound 7y ago

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.

timdorr 7y ago

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/ https://www.react-spring.io/

darepublic 7y ago

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.

OmarIsmail 7y ago

I totally agree with you. This is why I built React SPHO (https://github.com/ismailman/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.

bluebill1049 7y ago

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.