React Simple Animate – UI Animation Made Simple • Hacker News Board

Re: React Simple Animate – UI Animation Made Simple

#21

Post by OmarIsmail » Tue, May 28, 2019, 1:23 PM UTC

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

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.

Re: React Simple Animate – UI Animation Made Simple

#22

Post by iaml » Tue, May 28, 2019, 1:24 PM UTC

tomhoad wrote: post #15

iaml wrote: post #10

Earlier quoted context omitted.

>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

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?

Re: React Simple Animate – UI Animation Made Simple

#23

Post by OmarIsmail » Tue, May 28, 2019, 1:25 PM UTC

tomhoad wrote: 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 totally agree with you. This is why I built 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.

Re: React Simple Animate – UI Animation Made Simple

#24

Post by iaml » Tue, May 28, 2019, 1:33 PM UTC

Waterluvian wrote: post #16

revskill wrote: 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.

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

Re: React Simple Animate – UI Animation Made Simple

#25

Post by slig » Tue, May 28, 2019, 1:45 PM UTC

OmarIsmail wrote: post #21

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

Will have a closer look later today. It's always a pleasure to find useful libs written in TS, thank you!

Re: React Simple Animate – UI Animation Made Simple

#26

Post by ha99ja » Tue, May 28, 2019, 1:51 PM UTC

OmarIsmail wrote: post #21

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

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

Re: React Simple Animate – UI Animation Made Simple

#27

Post by OmarIsmail » Tue, May 28, 2019, 2:00 PM UTC

ha99ja wrote: post #26

OmarIsmail wrote: post #21

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

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

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.

Re: React Simple Animate – UI Animation Made Simple

#28

Post by prezjordan » Tue, May 28, 2019, 2:18 PM UTC

ha99ja wrote: post #26

OmarIsmail wrote: post #21

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

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

Because OP has an incentive to continue supporting his library

Re: React Simple Animate – UI Animation Made Simple

#29

Post by mcgreenbeats » Tue, May 28, 2019, 2:21 PM UTC

been using https://www.react-spring.io/ with https://github.com/d3/d3-ease to good affect

Re: React Simple Animate – UI Animation Made Simple

#30

Post by mrmonkeyman » Tue, May 28, 2019, 2:27 PM UTC

ha99ja wrote: post #26

OmarIsmail wrote: post #21

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

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

I'm sick and tired of amateur bullshit quickly thrown on GitHub and being promoted like a "great alternative". Support is zero, incentive is zero.

Why free? I want to pay for developer time because I actually want to work with professional developers, not kiddies. The free as in beer software bullshit ideology is destroying this profession.