SVG Animations

Chapter 14. React-Motion

There are many ways to animate an SVG in React, and any one of the techniques we’ve covered can be altered and used in a React context. But React-Motion has some beautiful offerings that make it stand out, making it worthwhile to spend a chapter focusing on the features.

As mentioned in Chapter 7, React-Motion is very different from sequentially based sequencing techniques such as CSS or the GreenSock timeline, in that we aren’t actually using time to control our interpolation at all.

Like with game-based physics, with React-Motion we give our elements mass and spring parameters, and send them on their way. For this reason, we can get very lifelike motion that is interruptible (I’ll explain what I mean by this in a moment), and can create incredibly beautiful motion in a UI.

React-Motion exports three main components: <Motion/>, <StaggeredMotion/>, and <TransitionMotion/>.

But the full list of exports includes the following:

• spring
• Motion
• StaggeredMotion
• TransitionMotion
• presets

We’re mainly going to focus on the <Motion /> and <StaggeredMotion /> components in this chapter, but there is more information available in the README of the project.

Getting up to Speed

If you aren’t accustomed to React or ES6, this chapter might be confusing for you. My suggestion is to get to grips with the working principles each of these first (which is out of the scope of this book), and then return here to learn more about React-Motion as an animation library. You can’t ...