ELI5 tutorial and examples for React-Spring newcomers
React Spring provides us the power of spring physics to create animations that resemble of how things in real life. But it can be difficult for a newbie to learn, I thought I'd contribute some basic examples of how each hook works and the different ways we can trigger them.
This repo contains an ELI5 tutorial with examples for the following
- useSpring
- useSprings
- useTrail
- useTransition
- useChain
Clone the repo into your desired folder then:
cd Im-SPRUNG-react-spring-tutorial
yarn install
yarn dev
Simply open App.tsx and uncomment the component corresponding to the hook you are trying to learn and save to reload the page.
In the ./src/animations you will find each componenent with comments explaining how it works. The examples are at the bottom where we return the tsx.
If you want to see the second/third example comment out the current example and uncomment desired example, reload and voila!
Because this uses vite if you cdm + s or ctrl + s it will auto-reload the page for you. But sometimes the hmr stops working so you need
to open the vite.config.ts in an adjacent window and save that file for the auto-reload