Make Your React Animation beautiful and fun with Rive
Lemme guess, you’re a react developer who wants to add beautiful smooth animation in your react project, right ? Awesome because today we’ll learn how to use rive animation in your react project and make your web app beautiful and fun.
What is Rive ?
Let me first introduce you to Rive. An amazing platform to build and ship beautiful and interactive animations to various platform, i.e. web, mobile apps and games.
Below are some cool examples :
Why Rive ?
- Rive offers collaborative editor where anyone can design and animate easily
- You can use State Machines to add logic into your animations
- Rive files are a fraction of the size of videos, gifs, or png sequences.
- Rive animations are interpolated in realtime with your app or game’s frame rate.
- You can speed up or slow down your animation without losing any quality.
Use Rive in React
First you need to download any .riv file from Rive Community Examples or create your own animation in rive editor.
Install rive-react
Now install rive-react npm package using :
npm i --save rive-reactUsage
You can either use Rive Simple Component from rive-react OR use useRive hook.
Rive Component
Using Rive Component is pretty easy. You just need to import Rive component and pass src and animation props to it.
src could be the file path of .riv file if your animation file is in public folder
OR you could pass the module name if you import .riv file.
useRive Hook
You can also use useRive Hook like
useRive hook gives us two things :
1. rive Object which has methods like play() attached to it.
2. RiveComponent itself.
Hooking up State Machine with useRive
But what if you want to add logic to your animation. Guess what rive-react offers another useful hook called useStateMachineInput which can be used to add control input logic.
Hurray ! You’ve successfully plugged rive animation into your react project. I hope you enjoyed and learned something new today. Will meet you in my next blog. Till then, bye.
Resources
And yeah couple of resources you can look :
