React Spring can help you with animations, which are notoriously tricky to implement on the web. CSS animations are the best choice, but creating a smooth result, requires careful juggling of classes, durations and events. Throwing a JavaScript framework like React into the mix only complicates things further.
For animations that rely on user interaction, values can be computed through JavaScript and applied to an element directly. By taking this manual approach, we would need to calculate and apply our own easing to make the animation look more natural.
React Spring is a library that is built to deal with lots of the common hang-ups when it comes to animation on the web. It takes a slightly different approach, by focusing on physics over straight durations and defined easing functions. This helps to keep things feeling smooth and natural.
While most of the time this is used for visual effects, the library will transition between two values regardless of whether that value is ever used for a style or not. For example, it could be used to count up a number of sign-ups to emphasise how big a community is.
In this tutorial, we will be making a card component that allows users to rate images. The card flips to reveal a star rating and users can click to add their own. We will be using React Spring’s newer hooks implementation, which requires React version 16.8 or above. Before you start, download the tutorial files here (and back them up in cloud storage).
If you want to build a site without complex code processes, use a decent website builder. And be sure to explore web hosting options, too.
With the files downloaded, the package dependencies need to be installed before we can start. This Create React App-based project includes the react-spring package and all the necessary local server set up needed to get started.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
On the command line, locate the project files and install, then run them.
> yarn
> yarn start
02. Generate images in state
First, we need some images to rate. For this tutorial, we are going to hard-code some images into the application state, but this data could come from any source. Open up App.js and create some images with the useState hook from React. This will give each image an initial rating we can display and update later on.
As the images are stored in an array, we can loop over that state and create separate components for each. The animation logic for React Spring will live inside a <RatingsCard /> component that we can use anywhere we need to.
Inside the render method of App.js, create a copy of that component for each card in the state array. It will receive every value in the state, including the image and the initial rating.
Before we can add the animation, the card needs some content. Each card has a front and back, which are implemented as separate <div> elements layered on top of each other.
Open RatingsCard/index.js, and add the structure of the card. We need to apply the image as a background to the front card, with the back eventually containing the rating.
Any styles that are not directly updated through our animations can be applied through CSS. This includes the basic 3D shadow effect for each card when hovered over. Inside RatingsCard/style.css, add some extra styles to make the card jump out of the page on hover by applying a filter.
A sudden shadow on hover is a jarring experience. We should therefore slowly transition between states to keep things smooth. Add a subtler drop-shadow for the card when not being hovered over. Use the transition property to animate between those two states.
We need to store and update information about which side of the card is facing up. We can use React’s built-in useState hook to define a start value and it have it return the current value and a method to update it.
At the start of the RatingsCard component function, create define this selected state.
const [selected, setSelected]
= useState(false);
08. Define the flip animation
React Spring is responsible for transitioning numbers between one value and another. This can be done with a spring and the useSpring hook. We provide it some setup information, and it returns a set of values that update according to its physics calculations.
Create a spring for the flip animation. This one will fade and rotate a card depending on whether the card is in its selected state.
The objects returned by useSpring define their animation, but do not provide the numeric values we need. The animated factory function digests this information and then supplies the values as numbers to the components.
Convert the RatingsCard element to use the animated function. The animated.div syntax tells the function to return a <div>.
React Spring is only animating the values and does not do any animation of elements itself. We can link those values to a style prop and create that animation on the fly. Update the front card to make use of the new opacity and transform values. In this case, we will need to interpolate the opacity value, which we will address shortly.
When flipping the card, whatever animation we apply to one face will need to be applied in reverse to the other. When played together, they will look like they are moving as one piece.
In this case, we need to apply the same styles to the back card, but this time interpolate the transform value instead.
Instead of directly applying values to CSS properties, we can apply some kind of function to them, in order to map their value to a different one. This process is called interpolation.
Define a couple of interpolation functions towards the top of RatingsCard/index.js. These apply the reverse of both the opacity and transform animations when selecting or deselecting.
const inverseOpacity = o => 1 - o;
const inverseTransform = t =>
`${t} rotateY(180deg)`;
13. Toggle state on click
The flipping of the card should be tied to a click. As the selected state value determines which face is visible, we should toggle that state when clicking the card.
Add a click listener to the outer RatingsCard element. When this happens, it will toggle the Boolean value held in state.
Right now, our animation works, but it seems more of a float than a flip. We can change some values on each spring to change how it behaves. Inside the setup object for the spring, create a config object to decrease the friction and increase the tension. This will give the animation a snappier feel.
While the CSS-powered hover effect from earlier provides some feedback, we can enhance that further by having a tilting animation that reacts to the cursor position. When updating a spring at a high frequency, such as a mouse move, we can get better performance by using the set function that gets returned by each spring. Create a new spring for this animation and keep a hold of its returned function.
React Spring can animate many different types of values, which includes arrays. Storing our values in one array allows us to interpolate them all onto the transform property in one pass.
Create a transformCard interpolation function and apply the styles to the main RatingsCard element.
Mouse events provide the coordinates of the cursor at that time. We are interested in the client coordinates to get the cursor position within the viewport. Add mouse move and leave events to the outer <div>. We pass the coordinates to a function on move and reset to the default values when the cursor leaves the <div>.
We only want a small tilt to avoid the card moving too much when the user interacts with it. The calculateValues function will work out the side of the screen the cursor is on and tilt it towards that direction.
Create the function to fill out those values. Dividing by 40 lessens the tilt effect to make it more usable. The final value will visually raise the card from the screen.
Each image has a rating that we need to display in stars on the back of the card. This logic is held inside its own component, but that needs to be applied to the back face first.
First, create a new piece of state to hold the rating, then create a <StarRating> component inside the back facing <div>.
The star ratings are going to fade in once the card has flipped. By using the useTrail hook from React Spring, we can apply springs to multiple components, one after another.
Open up StarRating/index.js and add the hook in. The first argument will define the number of springs to make.
The last thing we need to do is actually display those stars. The animatedStars variable now contains an array of springs, which we can iterate over and apply to the card.
For each star, show an <AnimatedStar> component inside the main StarRating div. Spread the style props to apply all the effects to each component. When clicked, send the new rating to the parent <RatingCard> component.
Matt Crouch is a front end developer who uses his knowledge of React, GraphQL and Styled Components to build online platforms for award-winning startups across the UK. He has written a range of articles and tutorials for net and Web Designer magazines covering the latest and greatest web development tools and technologies.
