Full-Stack React Projects - Second Edition

Animation with requestAnimationFrame

The rotation behavior for each 3D object is implemented in the event handlers added to the Entity component, which is rendering the 3D object. Specifically, in the rotate(index) and stopRotate() handler methods that are called when the onEnter and onExit events occur, we will implement rotation animation behavior using requestAnimationFrame for smooth animations in the browser.

The window.requestAnimationFrame() method asks the browser to call a specified callback function to update an animation before the next repaint. With requestAnimationFrame, the browser optimizes the animations to make them smoother and more resource-efficient.

Using the rotate method, we will update the rotateY transform value of ...