Animated Handwriting Text in React with Vara.js

Introduction

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.

You can visit my website for full reference on how to create animated handwriting text in React.

Prerequisites

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.

Using Vara.js to Create Animated Handwriting Text in React

Let's create a new file called VaraText.tsx (or VaraText.jsx if you are using JavaScript) inside src/components.

Then, we will create a component called VaraText as follow:

function VaraText({ text }: { text: string }) {
  useEffect(() => {
    var vara = new Vara(
      "#vara-container",
      "https://raw.githubusercontent.com/akzhy/Vara/master/fonts/Satisfy/SatisfySL.json",
      [
        {
          text: text,
          fontSize: 40,
          strokeWidth: 0.7,
        },
      ]
    );
  }, []);

  return <div id="vara-container" className="z-[20]"></div>;
}

I will explain line-by-line from the code above.

First of all we define a React component called VaraText with one argument text which is the text we want to write out.

Then, inside the useEffect hook we will create a new Vara component. This component will be rendered in a div that we will define later.

The first parameter will be the id of the div tag, 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.

Remember to insert the URL of the raw font file on GitHub, which starts with "https://raw.githubusercontent...".

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 fontSize, strokeWidth, speed, and more.

You can add more text like this:

var vara = new Vara(
  "#vara-container",
  "https://raw.githubusercontent.com/akzhy/Vara/master/fonts/Satisfy/SatisfySL.json",
  [
    {
      text: text,
      fontSize: 40,
      strokeWidth: 0.7,
    },
    {
      text: "Some text",
      fontSize: 26,
    },
    {
      text: "Some more text"
    }
  ]
);

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 index.tsx inside src/pages to see how it works.

import VaraText from "@/components/VaraText";

export default function Home() {
  return (
    <div>
      <VaraText text='WiseCode Team' />
    </div>
  );
}

This code will output the text "WiseCode Team" as we can see from the Introduction section.

Conclusion

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.

Happy coding!