Hey guys, have you been looking for an animation library that can animate the text by the stroke? If so, you are at the right place.
Let's see how we can create an animated handwriting text in React like the image below with the Vara library.
Table of Contents
Before using the Vara library, we will have to install it. Using a simple command
npm install vara to install Vara.js.
If you are using TypeScript, remember to install its type by
npm install -D @types/vara.
Let's create a new file called
Then, we will create a component called
VaraText as follow:
I will explain line-by-line from the code above.
- First of all we define a React component called
VaraTextwith one argument
textwhich is the text we want to write out.
- Then, inside the
useEffecthook we will create a new Vara component. This component will be rendered in a
divthat we will define later.
- The first parameter will be the
divtag, which was mentioned above, that we will draw out the text.
- The second parameter will be the JSON file of the font being used. There are four pre-made fonts from the Vara's author. You can choose any of them for your text, in this case, I will pick SatisfySL.
- The third parameter is a list containing different texts you want to show. Each text will have various properties for you to customize such as
speed, and more.
For the second parameter, remember to insert the URL of the raw font file on GitHub, which starts with "https://raw.githubusercontent...".
You can add more text like this:
After creating the
VaraText component, you can go anywhere on your page to create an animated handwriting text component. For example, let's modify the
src/pages to see how it works.
This code will output the text "WiseCode Team" as we can see from the Introduction section.
That's all for this tutorial. We have been using Vara to create beautiful animated handwriting text in React.
For more customization, please visit the Vara project homepage to learn how to adjust the animation and all other properties of the text.