O'Reilly logo

Mastering React by Ryan Vice, Adam Horton

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using the React-Motion animation library

React-Motion is a very nice physics based animation library created by Cheng Lou, an avid contributor to many things React. In some ways, React-Motion is similar to jQuery animate. Specifically, it's a fancy interface to tween numbers. In previous examples, animation was achieved by strategically changing CSS classes attached to elements. When classes change CSS properties, which are the target of a transition property, the browser automatically uses the declared transition property details to handle animation frame-by-frame. Another, more direct, way to animate is to change CSS declarations on the style attribute of the virtual DOM elements themselves.

How React-Motion works

Animation on the web is a process ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required