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