Animations

[ItsJonQ]

Interesting comparison of various React animation solutions:

https://www.freshtilledsoil.com/whats-the-most-developer-friendly-react-animation-library/

[ItsJonQ]

Note: TransitionGroup doesn't support staggering at the moment. There's a Feature Request for it, as well as an open PR:

reactjs/react-transition-group#73

Maybe we can enhance the AnimateGroup component (introduced in #79) with staggering? 🤔

[ItsJonQ]

AnimeJS code example:

https://github.com/aholachek/react-animation-comparison/blob/master/src/react-transition-group-example-anime.js

[ItsJonQ]

Experimenting here:
https://github.com/helpscout/blue/tree/animejs

Thoughts so far: AnimeJS is VERY cool… but there's some… trickiness when it comes to combining opacity with other transform based animations (due to easing coordination)

An alternative idea would be to not use animejs, and enhance the current Animate component's CSS animations to support elastic bezier curves. That way, we can better coordinate something like fade with bounceDown.

[ItsJonQ]

Elastic with CSS animations is very promising! I find that it promises better fine-grain control when combining various animation types.

Example of staggered opacity (linear) + height/transform (elastic):

Transition details:

  transition:
    opacity 400ms linear 0ms,
    height 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 100ms,
    transform 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0ms;

Above cubic-bezier formula from:

http://easings.net/#easeInOutBack

Solid buttery 60fps, even with height related repaints. Profiled using Chrome.