How To Build Cool Horizontal Scroll Interaction Flow by Using React

In this tutorial, we’ll create a fun scroll animation in which items “flip” in the direction of the scroll. We’re going to use react-spring for animating and react-use-gesture to tie animation to the scroll events. The animation looks flat because by default the rotation is 2-dimensional, it’s rendered as if there were no distance between the user observing the animation and the rotation plane. We need to be able to trigger animation manually, but for the time being, it will be easier to see the result of the changes if animation simply runs on mount.