React Simple Animate – UI Animation Made Simple
react-simple-animate.now.sh
react-simple-animate.now.sh
Here's the one that I've been working on recently: https://github.com/ismailman/react-spho
My philosophy is different though that I want to make it absolutely dead simple to make UIs animate organically vs being a feature-filled animation library. I think React-SPHO is actually the easiest to use animation library for React available as most things you want to do "just work" and anybody reading the code using the library knows exactly what's going on without having to read any documentation so ramp-up for basic use cases is effectively instant.
And I tried to design it so that it saves you and your team a lot more than an hour.
One reason for paying is to ensure that the library is maintained: too many people out there assume that labor is free.
I would not pay for anything that isn't open source, though, because I do not want to become fully dependent on something that might disappear.
Just my personal opinion, but it's unlikely anyone will pay for this given the amount of free alternatives, and it's unlikely anyone will use it in OSS projects because there is a paid tier.
https://github.com/react-spring/react-spring
https://github.com/Popmotion/popmotion/tree/master/packages/...
The funny thing is that even doing a proper investigation of the different libraries will easily take you over an hour.
Like I said before, it's just my opinion, but I'd take a library with thousands of stars and a group of people maintaining it over something unknown and paid any day. If you think it's a good idea to pay for this, more power to you.
Is OP's library not trying to be dead simple?
I think hooks are cool, but this proliferation of two APIs when using/authoring libraries is concerning to me.
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).
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.
Normally, it's beneficial 100x times when a OSS project tells how things work in a concise manner.
In that way, it made sense for both users (they actually want to contribute back if they figure out how things work).
One failure example is Next.JS. You never understand how things work under the hood without digging source code.
Eg. how could you animate a component which gets replaced to a whole different part of the DOM-tree in react?
That may sound pedantic but the distinction is important.
React components aren't a "virtual DOM", they are a "component tree" that gets synced to the DOM. A component may or may not correspond to one or more elements in the DOM and it may wrap other components.
Thinking of "rendering" a component as "syncing the DOM" seems to be a common misunderstanding, especially when it comes to performance concerns (because manipulating the DOM unnecessarily is bad).