[nkkollaw]

One thing completely missing from courses is how to handle animations.

Most React apps have no animations whatsoever (including mine, because I have no idea how to implement them), but they're important for usability IMHO.

[eat_veggies]

Pose [0] was posted on HN a few days ago. I haven't tried it, but its API looks super clean. HN Discussion [1]

[0] https://popmotion.io/pose/

[1] https://news.ycombinator.com/item?id=16701756

[hakanito]

I got excited about Pose but when I tried it out I saw a lot of unexpected and undocumented behavior. Seems promising but docs needs more work and examples!

[SirHound]

Creator here - have you got any specific examples of this behaviour? I’d be glad to hear of them

[hakanito]

I was trying to create a slide down animation, but could not figure out if Pose is dependent on the height property or not. Some times transforms worked-ish and sometimes not.

[SirHound]

Hmm probably because height and width are converted to transforms as FLIP animations. Maybe I’ll look into making that opt-in. Thanks dude.

[nkkollaw]

Looks great!

[face_mcgace]

http://airbnb.io/lottie/ the perfect solution (works for React and React Native too).

[zng00]

Wow, this looks amazing. Have you used it for web?

[wuliwong]

I was just reading a bit about animations in react, i honestly hadn't thought much about it before. It was because of an HN post about this library https://github.com/kutlugsahin/react-smooth-dnd. But just quickly looking back it seems they use CSS transitions for animations. That is an option, not sure how limiting it may or may not be.

[nkkollaw]

Yes, it's the only way that it makes sense. It's not that limiting, you can probably use animate.css.

I absolutely have to look into this soon.

[Sakes]

I'm literally working on a lib to solve this right now, specifically to be used with react-router. If you want I can contact you when finished and you can give it a whirl.

Implementation will look something like <TransitionGroupRoutes><CSSTransitionRoute path="..."/><CSSTransitionRoute path="..."/></TransitionGroupRoutes>

[nkkollaw]

Transitions are fine, I'm more worried about how to give an indication that a panel has been open or similar.

I'll check it out, though! If you have a mailing list feel feel to add me: [e-mail]

:-)

EDIT: I think your comment below is too deeply nested and it doesn't let me reply. However: I think a mailing list is useful even for personal project. In the event that the project gets traction, it would allow you/motivate you to keep working on it and improve it (I'm a professional side project creator).

As for nested animations, it might make sense to chain them..? Not sure.

[Sakes]

Good advice, I'll set it up. The problem I ran into with react-router-redux was the requirement of using location to provide the value for a key on CSSTransition. I had to use this implementation to solve the problem of the missing exit animation. https://reacttraining.com/react-router/web/example/animated-...

This uncovered a new problem for nested animations. The high-level page transition animation occurs even when the url root does not change. So I need to be able to ignore animations on Route components located high in the VirtualDOM, and apply animations (sometimes different animations) on Route components located further down.

Maybe you already know of an elegant solution to solve this problem? If so let me know! In the meantime, I'll keep bang'n on this.

Edit:

Concerning giving an indication that a panel has been opened, I'd just use CSSTransition wrapped around whatever element that is going to be introduced to show that it has been opened. Then define your 'enter' animation in css.

If that seems like overkill, and you can't use did mount to determine if the animation should be applied, then I'd just add a css className to your element to introduce some animation defined in CSS.

Obviously, I may be misunderstanding your use cases here. The above are just knee-jerk thoughts on it.

[Sakes]

Sure! Will do. Honestly, I was just building it for myself, so no mailing list. But I'd be excited to see how you like it.

The problem I'm aiming to solve is nested route animations, and allowing for different animations to be applied depending upon the previous route in history.

[lpghatguy]

I really like React Motion [0] because the API is really simple and the concepts are pretty easy to grasp. If you like the concept of Pose (springs), React Motion might be more predictable.

[0] https://github.com/chenglou/react-motion

[DimitriMikadze]

Hey, sorry to hear that, i thought it was more of a CSS topic then React's and because of that i have not recorded lesson regarding animations. I don't know if it help you, but in most cases i use CSS transitions with classname manipulations and lifecycle methods if needed.

[nkkollaw]

Ah, no I'm just saying in general :-)

[_qbjt]

Class names and CSS transitions have worked just fine in my experience. That said, I'm much more in favor of external stylesheets than coupling styles with components themselves. It seems like the trend with React is to do the opposite.

[nkkollaw]

Yes, it's the component's responsibility to animate a panel that is part of it, I would think.

Perhaps providing hooks to override the behavior, but even not.