
Pose: A declarative motion system for HTML, SVG and React - SirHound
https://popmotion.io/pose
======
finchisko
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
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
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
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...](https://popmotion.io/pose/learn/animating-
children/#animating-children-delay-and-stagger-children)

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)

~~~
finchisko
> Maybe `waitForChildren` and `waitForParent` booleans would be helpful too

That would be great start :)

~~~
SirHound
Just to follow up, last night I published `beforeChildren` and `afterChildren`
flags to enable this!

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

------
1000hz
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!

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

------
crooked-v
This seems like a game-changer for React components.

~~~
RobertRoberts
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
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
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)

------
jamesmcintyre
Looks awesome! Will definitely try this out!

------
victornomad
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
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
I actually got a good chuckle out of the burrito emoji.. throw in a whiskey
for the beer tho

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

~~~
iteriteratedone
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
It's not jsx, which is just sugar for createElement(). It's because components
are supposed to be stateless, but animations are inherently stateful.

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

------
deevolution
Going to try this out tonight

------
jamiepenney
Wow, this is really nice!

------
matte_black
Ready for production?

~~~
SirHound
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

------
chrisweekly
Wow

------
abritinthebay
Extremely slick. Love it.

------
bartl
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
So because you don't have a specific use for it means no one does?

