9 ms·
React Simple Animate – UI Animation Made Simple
- onion-soup 7y agoIt'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?
- underwater 7y agoYou do render it twice. For example, when toggling the `play` property. It looks like the component will adjust smoothly.
- pluma 7y agoIt'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).
- lurker9000 7y agosomeone should check the grammar on the homepage.
- tomhoad 7y agoMaybe English isn't their first language?
- dasanman 7y agoDoesnt matter, grammar still needs checkin!
- tomhoad 7y agoI _think_ that's ironic
- bluebill1049 7y agoyea its true :(
- revskill 7y agoThere's always a fork button for you to contribute ;)
- tomhoad 7y agoEasier to whine on HackerNews.
- bluebill1049 7y agosorry about my English :( I will try to correct them
- tomhoad 7y agoThis 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 agoPretty much because of staggering
- iaml 7y agoI 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 agohttps://popmotion.io/pose/learn/animating-children/#animating-children-scheduling-animations-staggerchildren https://popmotion.io/pose/learn/animating-children/#animatin...
- SirHound 7y agoIf 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
- revskill 7y agoThere'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 7y agoI 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 7y agoThis is exactly how it works, and by default production build of create-react-app produces source maps.
- bluebill1049 7y agoI am more than happy to share how to build it. I will write a blog on it soon.
- mseidl 7y agoNo <blink>? Weak!
- OmarIsmail 7y agoLooks 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.
- slig 7y agoWill have a closer look later today. It's always a pleasure to find useful libs written in TS, thank you!
- bluebill1049 7y agoThank you too :) feedback welcome
- ha99ja 7y agoWhy would anyone pay for your non-free software when there are hundreds of great alternatives?
- OmarIsmail 7y agoGonna 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.
- prezjordan 7y agoBecause OP has an incentive to continue supporting his library
- mrmonkeyman 7y ago
- jcelerier 7y agostarting 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)
- pezo1919 7y agoHow 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?
- mcgreenbeats 7y agobeen 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
- MentallyRetired 7y agoAre we afraid of CSS now?
- janpot 7y agoI 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 7y agothanks, buddy, take a look it's actually not that bad, cause the library itself its only 2kb. it can't get too complicated :)
- bluebill1049 7y agoThanks so much sharing praveenscience.