5 ms·

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

239 points by SirHound 9y ago

marknadal 9y ago
Excellently done, and remarkable this is MIT licensed! Incredible work, thank you for this awesome contribution to Open Source!
jamiepenney 9y ago
Wow, this is really nice!
deevolution 9y ago
Going to try this out tonight
abritinthebay 9y ago
Extremely slick. Love it.
chrisweekly 9y ago
Wow
Waterluvian 9y 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 9y ago
This seems like a game-changer for React components.
- RobertRoberts 9y 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 9y 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.
    - nikisweeting 9y ago
      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 https://github.com/Monadical-SAS/redux-time
  - sbr464 9y 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 9y ago
This is great! I have been looking for an easy drop in animation library for React. Excited to try it out
- iteriteratedone 9y 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 9y 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 9y ago
Looks awesome! Will definitely try this out!
matte_black 9y ago
Ready for production?
- deleted 9y ago
  [deleted]
- SirHound 9y 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 9y 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 9y 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.........
- SirHound 9y 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
  - sbr464 9y ago
    I actually got a good chuckle out of the burrito emoji.. throw in a whiskey for the beer tho
- croon 9y 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 https://bugs.chromium.org/p/chromium/issues/detail?id=42984
- mullsork 9y 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_black 9y ago
  Could you imagine driving on a suspension bridge and seeing a plaque that reads "Made with burritos and beer"?
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 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 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 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...
    - SirHound 9y ago
      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/#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
bartl 9y 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 9y ago
  So because you don't have a specific use for it means no one does?
- inventingwithmo 9y ago
  Have you ever used an app? They seem to find a use for animations :)
Bromskloss 9y ago
Basic question, that I don't see answered upfront: Does it use Javascript?

239 points by SirHound 9y ago

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

jamiepenney 9y ago

Wow, this is really nice!

deevolution 9y ago

Going to try this out tonight

abritinthebay 9y ago

Extremely slick. Love it.

chrisweekly 9y ago

Wow

Waterluvian 9y 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 9y ago

This seems like a game-changer for React components.

RobertRoberts 9y 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 9y 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.
  - nikisweeting 9y ago
    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 https://github.com/Monadical-SAS/redux-time
- sbr464 9y 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 9y ago

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

iteriteratedone 9y 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 9y 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 9y ago

Looks awesome! Will definitely try this out!

matte_black 9y ago

Ready for production?

deleted 9y ago
[deleted]
SirHound 9y 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 9y 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 9y 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.........

SirHound 9y 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
- sbr464 9y ago
  I actually got a good chuckle out of the burrito emoji.. throw in a whiskey for the beer tho
croon 9y 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 https://bugs.chromium.org/p/chromium/issues/detail?id=42984
mullsork 9y 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_black 9y ago
Could you imagine driving on a suspension bridge and seeing a plaque that reads "Made with burritos and beer"?

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 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 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 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...
  - SirHound 9y ago
    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/#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

bartl 9y 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 9y ago
So because you don't have a specific use for it means no one does?
inventingwithmo 9y ago
Have you ever used an app? They seem to find a use for animations :)

Bromskloss 9y ago

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