Animation III: A badge zooming/fading in and out

The Need:

Animate scale and opacity of an image in the middle of another animation.

The Solution:

CSS3 keyframes. Since the badge is always the same size and we always want it to zoom in and out after a fixed delay, CSS animations were enough to get the job done. We attached an is-levelingUp class during the level-up state and added a 500ms delay to give the planets a head start.

Alternatives:

We tried using ReactCSSTransitionGroup to animate the badge in and out of the DOM:

The outcome of this was inconsistent — the animation was sometimes fast-forwarded or cut off. Fine-grained timing was not in our control. Turns out CSSTransitionGroup is good for transitioning in or out of the DOM, but not in and out of the DOM. We then realized there was no need to actually remove the badge from the DOM — we could just render it with 0 opacity when we didn’t want to show it.



Another option was using VelocityJS, which allows you to specify the timing of multiple components in parallel with its UI Pack plugins. If we had used Velocity, all the timing would be in one place and we wouldn’t run the risk of CSS and Javascript animations interfering with each other or being timed incorrectly. The downside is that we would break modularity by having the component’s animation controlled by another component, perhaps some central animation coordinator. Ultimately, we decided it was okay if the badge and planet synchronization had a small margin of error and when we tested it across browsers, it actually appeared to be fairly consistent. Coordinating the animation of multiple components via Velocity is something worth exploring further, though.

Conclusion

There is currently no single, clear-cut way to implement animations in React; rather there are many ways to animate components depending on your needs. As React and these supporting libraries continue to develop, we’ve found that experimenting with different options (and remembering to test across browsers!) is the best way to find something that works. In the future, perhaps animations in React will become more streamlined. In the meantime, we are thankful to the developer community for creating all these solutions thus far and excited to see what further developments arise down the road.



In what ways have you animated components in React? Do you have suggestions for other ways to implement the animations I described? Tweet @jenkliu. And if building animations to make learning more fun for millions of people is something that interests you, let me know — we’re hiring!

Check out the animations yourself while brushing up on U.S. State Capitals and play Gravity here.