Skip to main content

react-spring

react-spring is a powerful react library that allows the user to create imperative animations, on the components the user wants to animate.
It uses spring physics for its animation configuration rather than bezier-curves, making it more intiutive to use.

Introduction​

This is a set of recipes about how you can create an complex interactive react component using react-spring
I'm going to assume you have knowledge about the following React concepts.

Environment Setup​

Make sure you are using a React Application for these tutorials.
Learn about setting up a React Application

Make sure to have installed the following libraries.

Here's a shortcut for the same.

npm i react-spring @use-gesture/react

Recipes​

Each of the following recipes have

  • Interactive Preview
  • Code Section
  • Code Breakdown
  • Conclusion

Recipe 1 (a box that slides around)​

  • we're going to start small, by creating an simple box, which translates in the x-axis (or slides around in th x-axis).

📄️ Recipe 1

A box that slides around

Recipe 2 (a box that shrinks and grows)​

  • for this one, we build on our existing knowledge, by creating a similar project, about a box that shrinks and grows

📄️ Recipe 2

a box that shrinks and grows

Recipe 3 (HOC architecture for react-spring components)​

  • here we apply an HOC architecture onto our components from recipe 1 and recipe 2, and showcase how to orchestrate multiple transitions with timing delay, without much additional configuration.

📄️ Recipe 3

HOC architecture for react-spring components

Recipe 4 (A list of swipe gesture based Dismissibles)​

  • reusing the logic from recipe 1 and recipe 2, we build further understanding of how powerful the react-spring library is, by using it along with @use-gesture/react, to build facinating swipe gesture based dismissibles list.

📄️ Recipe 4

A list of swipe gesture based Dismissibles

Recipe 5 (An optimized list of swipe gesture based Dismissibles with Enter and Exit transitions)​

  • extending on the logic of recipe 4 we optimize our dismissibles, to be atomic components, that can be reused inside a list. While doing so, we're also going to take a look at how to smoothly animated them, in and out from the DOM tree, in the form of a list item.

📄️ Recipe 5

An optimized list of swipe gesture based Dismissibles with Enter and Exit transitions


NOTE: The recipes get increasingly interesting, and require more attention to understand what's happening, please make sure you focus on them accordingly.