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 for animating and to tie animation to the scroll events. The native event handler won't do in this case, because we'll need additional information about scrolling that native handler doesn't provide - scroll delta in pixels, and whether the scrolling is in progress or not. react-spring react-use-gesture onScroll onScroll This is what we’re going to build: Basic setup We’ll start with the basic React component you can see below. The component renders a list of images from folder, and sets them as background for elements: public div movies = [ , , , , ]; App = { ( <> <div className= > {movies.map( ( <div key={src} className= style={{ backgroundImage: }} /> ))} < > ); }; const "/breaking-bad.webp" "/the-leftovers.jpg" "/game-of-thrones.jpg" "/true-detective.jpg" "/walking-dead.jpg" const => () return "container" => src "card" `url( )` ${src} /div> </ Next, we’ll apply some styling. We need to make sure that the container takes up 100% of the width and it allows its children to overflow: ::-webkit-scrollbar { width: ; } { : flex; : scroll; : ; } { : ; : ; : ; : ; : ; : cover; : no-repeat; : center center; } 0px .container display overflow-x width 100% .card flex-shrink 0 width 300px height 200px border-radius 10px margin-left 10px background-size background-repeat background-position With the basic styling, our component will look like this: Adding animation Let’s start by adding a rotation animation. First, we’ll replace element with . is a decorator that extends native elements to receive animated values. Every HTML and SVG element has an counterpart that we have to use if we intend to animate that element. div animated.div animated animated Next, we’ll use hook from react-spring package to create a basic animation that will run when the component is mounted. Eventually, we'll bind our animation to the scroll event, but for the time being, it will be easier to see the result of the changes that we make if animation simply runs on mount. useSpring hook takes an object with CSS properties that should be animated. These properties should be set to of the animation, so if we want to rotate s from 0 to 25 degrees, we set the value to . To set the , we use property which itself takes an object with CSS properties. useSpring end values div transform rotateY(25deg) initial values from hook returns a object that we need to set on the target component. We can see the updated code and the result below: useSpring style { animated, useSpring } ; App = { style = useSpring({ : { transform: }, transform: }); ( <> <div className= > {movies.map( ( <animated.div key={src} className= style={{ ...style, backgroundImage: }} /> ))} < > ); }; import from "react-spring" const => () const from "rotateY(0deg)" "rotateY(25deg)" return "container" => src "card" `url( )` ${src} /div> </ This 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. transformation allows us to move the observation point away from the rotation plane, and thus makes 2-dimensional animation look 3-dimensional: perspective style = useSpring({ : { transform: }, transform: }); const from "perspective(500px) rotateY(0deg)" "perspective(500px) rotateY(25deg)" Finally, we need to add vertical padding to the container to make sure that children elements don't get cut off: div { : flex; : scroll; : ; : ; } .container display overflow-x width 100% padding 20px 0 Before we start working with scroll events, we need to make a small change to how we use hook. There are two things to keep in mind: useSpring we need to be able to trigger animation manually we no longer need to run animation on mount To address both of these issues, we’ll use a different signature - instead of with CSS properties, we'll that returns an object with CSS properties. useSpring passing an object pass a function Previously, hook returned us a object . With the new signature, it will return a tuple, where the first argument is a object, and the second argument is a function that we can call anytime to trigger the animation. useSpring style style set We can also drop property since this value will be determined based on the current rotation of the s: from div [style, ] = useSpring( ({ transform: })); const set => () "perspective(500px) rotateY(0deg)" Now we can import hook from react-use-gesture package and bind it to the container . The logic for handling scroll events is very simple - if the user is scrolling ( ), we want to rotate cards by the number of degrees equal to scroll delta on Y-axis ( ); if scrolling stops, we want to reset the rotation angle to : useScroll div event.scrolling === true event.delta[0] 0 { useScroll } ; App = { [style, ] = useSpring( ({ transform: })); bind = useScroll( { ({ transform: }); }); ( <> <div className= {...bind()}> {movies.map( ( <animated.div key={src} className= style={{ ...style, backgroundImage: }} /> ))} < > ); }; import from "react-use-gesture" const => () const set => () "perspective(500px) rotateY(0deg)" const => event set `perspective(500px) rotateY( deg)` ${ event.scrolling ? event.delta[0] : 0 } return "container" => src "card" `url( )` ${src} /div> </ Animation works, but there is an undesired side-effect — if we scroll sharply, the Y delta will be quite big, which may cause cards to flip more than 90 degrees. I’ve tested different values and discovered that the animation looks best if the cards flip no more than 30 degrees. We can write a helper function to clamp the delta value so it never gets more than 30 and less than -30: clamp = { (value > ) { value > clampAt ? clampAt : value; } { value < -clampAt ? -clampAt : value; } }; const ( ) => value: , clampAt: = 30 number number if 0 return else return Now we can use this helper function to clamp Y delta inside hook and get the final result: useScroll bind = useScroll( { ({ transform: }); }); const => event set `perspective(500px) rotateY( deg)` ${ event.scrolling ? clamp(event.delta[0]) : 0 } You can find a complete working demo of this interaction . here I also made the same interaction using . working demo is available . PS: framer-motion here Final thoughts I would like to mention two decisions that stayed behind the curtain of this tutorial but had been made before making this particular animation. The first decision concerns performance. To make the flip animation, we animated only property, which is one of the only two properties that are accelerated by GPU and that don't take time off the main thread (the other property is ). There's quite a lot we can achieve by animating only and , and whenever possible, we should avoid animating any other CSS properties. transform opacity transform opacity Secondly, we need to consider responsiveness. Horizontal scroll that we implemented works well on phones and tablets, but for larger desktop screens we might want to use a more common grid layout. With small CSS changes and a media query we can switch from to layout, and we don't have to change the animation at all - it will continue working on small screens that use layout, and it will be ignored on large screens since with layout we won't have horizontal scroll. flex grid flex grid If you want to get more tutorials like this one, make sure to subscribe to my newsletter .
