Pose: A declarative motion system for HTML, SVG and React

by SirHound • 8 years ago

239 36 8 years ago

marknadal• 8 years ago

Excellently done, and remarkable this is MIT licensed! Incredible work, thank you for this awesome contribution to Open Source!

jamiepenney• 8 years ago

Wow, this is really nice!

deevolution• 8 years ago

Going to try this out tonight

abritinthebay• 8 years ago

Extremely slick. Love it.

chrisweekly• 8 years ago

Wow

Waterluvian• 8 years ago

I've often wondered why the cost of adding even the most basic of animations to my React applications feels so high. It's great to see such a dead simple way to do some of this.

crooked-v• 8 years ago

This seems like a game-changer for React components.

RobertRoberts• 8 years ago

Someone else on here has already gotten modded into oblivion with questioning an issue here, so I want to clear I am not trolling in any way.

Why is this a "game-changer" for React specifically, and not Javascript in general?

zawerf• 8 years ago

Animation libraries for javascript are actually already pretty decent. You can find way better stuff out there if you want to stick with jquery.

But declarative animation libraries are severely lacking. React's paradigm is amazing whenever you can write stateless functional components. But animation doesn't fit neatly in this abstraction since you always need to track animation progress state. So if an item is change/removed from the state, you still need to hold on to the stale value long enough for the transition, track the progress, and then cleanup on animation completion. This gets messy really quickly!

I don't think there's a consensus on how to cleanly abstract this part out yet so people get excited when there's a new attempt.

sbr4642• 8 years ago

I think react is overdue for more solid animation patterns, maybe that’s the thought? If you look at react/vx (awesome lib) and similar, they are still searching for/discussing best practices for integrating animations. Understandably since it’s a nice to have, but having some consensus on patterns/libs would allow maintainers to include animation work without fear of un-necessarily increasing bundle sizes etc.

zeroproduct• 8 years ago

This is great! I have been looking for an easy drop in animation library for React. Excited to try it out

iteriteratedone• 8 years ago

Is there something about react that makes this difficult?

Is trying to work outside the virtual dom a constraint to creating motion on jsx elements?

I dont like the idea of jsx , reminds me of php with logic and templates tied together... does jsx make it tough to create an animation lib?

eat_veggies• 8 years ago

It's not jsx, which is just sugar for createElement(). It's because components are supposed to be stateless, but animations are inherently stateful.

jamesmcintyre• 8 years ago

Looks awesome! Will definitely try this out!

matte_black2• 8 years ago

Ready for production?

SirHound5• 8 years ago

I’ll have an FAQs with package size and browser support up ASAP but caveats off the top of my head:

- bug with SVG scale - needs weakmap/map/set support or polyfill. Aimed for ie11+

With those in mind it is good to go

1000hz• 8 years ago

Hell yes. Just a few days ago I was in search of the state-of-the-art in terms of open source animation libraries for React and was a bit shocked not much has really progressed beyond a half-implemented web version of react-animated, and the unintuitive and cumbersome API of react-motion (which also suffers from performance issues). This looks to be excellently thought out and is very promising. Can't wait to try it out!

victornomad• 8 years ago

its a nice library but...

What I dont understand is why the coder community often writes things like "coded with burritos and beer", or "love bacon and burguers", "code and pizza", "fueled with coffee" and so on...

it gives the impresion that coders eats only junk food and are alcoholics.........

SirHound5• 8 years ago

I’ve only ever seen the heart emoji, guess this ones been done! Anyway there’s been some gym and more than a few fruit and veg but I preferred the burritos so

sbr4642• 8 years ago

I actually got a good chuckle out of the burrito emoji.. throw in a whiskey for the beer tho

croon• 8 years ago

I struggled to find out why I couldn't see this on my corporate machine (running W7, and latest Chrome).

Being long in the tooth, few bugs surprise me anymore, but after a bit of googling around, the simplest workaround to this is placing a file on your desktop with a unicode filename [1]. Amazing!

[1] https://bugs.chromium.org/p/chromium/issues/detail?id=42984

mullsork• 8 years ago

I always assumed it's a jab at the "Made with <3 in <startupcity>" thing a lot of startups insist on putting on their site.

matte_black2• 8 years ago

Could you imagine driving on a suspension bridge and seeing a plaque that reads "Made with burritos and beer"?

finchisko4• 8 years ago

Quickly scanned through the code. And I'm kind of disappointed that Pose depends on HTMLElement, making it web only. I prefer animation libraries that are built on top of Facebook's Animated library.

Thanks to react-native-web project by @necolas you can use Animated on web too. That opens lot of opportunities to share animations between react-native and web. You can even use react-native animation libraries on web.

Last time I did that with react-native-motion, which required me to change one single line to make it work on web.

However what I'm personally missing, is some react component for orchestration complex animations. There are yubaba and react-native-conductor, but still feel we can do better here. Actually I was wishfully thinking that Pose can help here.

Anyway hats off to anyone who is working on stuff like this. Doing it right, is actually pretty hard job.

SirHound5• 8 years ago

Hey man! Two things:

1) Complexity: While this is more for dynamic UIs than full timelined animations, it has full compatibility with every Popmotion animation like Keyframes https://popmotion.io/api/keyframes, so you can do pretty involved stuff

2) DOM-only: My biggest lesson writing Popmotion is people just want easy stuff. So for this initial release I just wanted to concentrate on the DOM. It allows me to offer things like FLIP and leverage my other libraries (Stylefire/Popmotion) which I know are small and fast. That isn't to say there'll never be native support, just that I didn't have time to do that in a month of my spare time.

finchisko4• 8 years ago

Yep no problem man. :) I do understand your reasons. It still looks awesome though.

Keyframes looks promising for complex animation of single component. But what about multiple components? Like start animation of component only after some other finished its animation...

nikisweeting3• 8 years ago

Check out redux-time instead, it has no dependencies on React or any other render library, it simply animates the state changing in the redux store directly as a function of time, and you take care of the rendering process!

https://github.com/Monadical-SAS/redux-time

We built it to develop pure functional, declarative animations for poker (https://oddslingers.com), but it works well for any other games, including 3d ones using ThreeJS.

finchisko4• 8 years ago

Very interesting. By reading docs I like the idea.

So if I understand the core concept correctly, there is no React component. You only dispatch animation you want to perform as store action, and get back in timely fashion state updates which you apply as style props to any React component. Is that correct?

EDIT: Has been that thing already promoted on HN? Because I see it for the first time.

bartl• 8 years ago

Great, something really important like the old blink tag. /s

Only people programming ads will like this. Everybody else will pretty much hate its guts.

mvarrieur• 8 years ago

So because you don't have a specific use for it means no one does?

Bromskloss• 8 years ago

Basic question, that I don't see answered upfront: Does it use Javascript?

Pose: A declarative motion system for HTML, SVG and React

Related Stories