Pose: A declarative motion system for HTML, SVG and React(popmotion.io)
popmotion.io
Pose: A declarative motion system for HTML, SVG and React
https://popmotion.io/pose
38 comments
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.
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.
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...
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...
If you have two posed components:
<Parent><Child/></Parent>
You can currently use props like `delayChildren` to orchestrate between them: https://popmotion.io/pose/learn/animating-children/#animatin...
Maybe `waitForChildren` and `waitForParent` booleans would be helpful too
There's an advanced way of establishing this relationship for non-heirarchal components but I haven't got to writing the docs for that yet. A CodePen example here https://codepen.io/popmotion/pen/xWrbNm?editors=0010
<Parent><Child/></Parent>
You can currently use props like `delayChildren` to orchestrate between them: https://popmotion.io/pose/learn/animating-children/#animatin...
Maybe `waitForChildren` and `waitForParent` booleans would be helpful too
There's an advanced way of establishing this relationship for non-heirarchal components but I haven't got to writing the docs for that yet. A CodePen example here https://codepen.io/popmotion/pen/xWrbNm?editors=0010
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.
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.
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.
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.
Yes, we have not really promoted it on HN yet because we've been busy this past year and don't want to support too many users, but we've been demoing it at meetups.
There is no react element to the library, it simply changes redux store data, the props passed to the components change via mapStateToProps and thus your components are re-rendered whenever React decides to re-render them.
There is no react element to the library, it simply changes redux store data, the props passed to the components change via mapStateToProps and thus your components are re-rendered whenever React decides to re-render them.
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.
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!
Excellently done, and remarkable this is MIT licensed! Incredible work, thank you for this awesome contribution to Open Source!
This seems like a game-changer for React components.
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?
Why is this a "game-changer" for React specifically, and not Javascript in general?
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.
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.
We found the best approach that worked for us is to instead animate the values in the state tree directly, using declarative tween objects that are applied to the state tree on every requestAnimationFrame, instead of trying to mess with the React render process. Declarative animations are hard to do right, but this approach has worked well for us so far with https://github.com/Monadical-SAS/redux-time
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.
Looks awesome! Will definitely try this out!
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.........
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.........
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
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
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.
Could you imagine driving on a suspension bridge and seeing a plaque that reads "Made with burritos and beer"?
This is great! I have been looking for an easy drop in animation library for React. Excited to try it out
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?
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?
It's not jsx, which is just sugar for createElement(). It's because components are supposed to be stateless, but animations are inherently stateful.
Basic question, that I don't see answered upfront: Does it use Javascript?
Going to try this out tonight
Wow, this is really nice!
Ready for production?
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
- bug with SVG scale - needs weakmap/map/set support or polyfill. Aimed for ie11+
With those in mind it is good to go
[deleted]
Wow
Extremely slick. Love it.
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.
Only people programming ads will like this. Everybody else will pretty much hate its guts.
So because you don't have a specific use for it means no one does?
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.