5 ms·
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
by finchisko 9y 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.
- SirHound 9y agoHey 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 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.
- finchisko 9y agoYep 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...
- SirHound 9y agoIf 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/#animating-children-delay-and-stagger-children 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 https://codepen.io/popmotion/pen/xWrbNm?editors=0010
- nikisweeting 9y agoCheck 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 https://github.com/Monadical-SAS/redux-time We built it to develop pure functional, declarative animations for poker (https://oddslingers.com https://oddslingers.com), but it works well for any other games, including 3d ones using ThreeJS.
- finchisko 9y agoVery 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.
- nikisweeting 9y agoYes, 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.