DEV Community

Cover image for Animated Handwriting Text in React with Vara.js
Minh Vu
Minh Vu

Posted on • Edited on • Originally published at dminhvu.com

18 1 1 1 2

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.

Vara.js Text: WiseCode Blog

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>;
}


Enter fullscreen mode Exit fullscreen mode

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"
    }
  ]
);


Enter fullscreen mode Exit fullscreen mode

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>
  );
}


Enter fullscreen mode Exit fullscreen mode

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!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay