
React Simple Animate – UI Animation Made Simple - praveenscience
https://react-simple-animate.now.sh/
======
OmarIsmail
Looks like React animation libraries are popular right now.

Here's the one that I've been working on recently:
[https://github.com/ismailman/react-spho](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.

~~~
ha99ja
Why would anyone pay for your non-free software when there are hundreds of
great alternatives?

~~~
OmarIsmail
Gonna write more on this but short answer is that developers time isn't free.
If using React SPHO saves literally one hour in all the time you're using it
(could be years) vs these other alternatives then you're already ahead.

And I tried to design it so that it saves you and your team _a lot_ more than
an hour.

------
tomhoad
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
>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
Pretty much because of staggering

~~~
iaml
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
[https://popmotion.io/pose/learn/animating-
children/#animatin...](https://popmotion.io/pose/learn/animating-
children/#animating-children-scheduling-animations-staggerchildren)

------
revskill
There's something about OSS that fails to do (or i'm not sure if it's OSS
job): Teach how things work under the hood.

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.

~~~
Waterluvian
I get not wanting to push source maps to every client but it would be awesome
if your browser requested them when you opened the console and if it became
common practice to include them with your shipped website.

~~~
iaml
This is exactly how it works, and by default production build of create-react-
app produces source maps.

------
pezo1919
How is that possible that Svelte already has cool animations out of the box,
but the react ecosystem still struggles?

Eg. how could you animate a component which gets replaced to a whole different
part of the DOM-tree in react?

------
onion-soup
It's kinda counterintuitive to have an element called <Animation />. What
happens if I render it two times in a row before it's done animating?

~~~
pluma
It's not an element, it's a component.

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

------
mcgreenbeats
been using [https://www.react-spring.io/](https://www.react-spring.io/) with
[https://github.com/d3/d3-ease](https://github.com/d3/d3-ease) to good affect

------
jcelerier
starting to look as simple as QML :p
([https://qmlbook.github.io/ch05-fluid/fluid.html#animations](https://qmlbook.github.io/ch05-fluid/fluid.html#animations))

------
janpot
I tend to avoid software that has "quick", "simple" or "easy" in their name.
More often than not they are neither of those things :D. All jokes aside,
congrats on getting this out!

~~~
bluebill1049
thanks, buddy, take a look it's actually not that bad, cause the library
itself its only 2kb. it can't get too complicated :)

------
bluebill1049
Thanks so much sharing praveenscience.

------
mseidl
No <blink>? Weak!

------
lurker9000
someone should check the grammar on the homepage.

~~~
tomhoad
Maybe English isn't their first language?

~~~
dasanman
Doesnt matter, grammar still needs checkin!

~~~
tomhoad
I _think_ that's ironic

