Live data from Hacker News

React Simple Animate – UI Animation Made Simple

react-simple-animate.now.sh

11–20 of 50 posts

Re: React Simple Animate – UI Animation Made Simple

#13

It's kinda counterintuitive to have an element called . What happens if I render it two times in a row before it's done animating?

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

Re: React Simple Animate – UI Animation Made Simple

#14
post #5

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

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.

Re: React Simple Animate – UI Animation Made Simple

#15
post #10
post #5

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

>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

Re: React Simple Animate – UI Animation Made Simple

#16
post #9

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 w…

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.

Re: React Simple Animate – UI Animation Made Simple

#17
post #5

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

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/
Post reply on HN