Web Design — Create an SVG Animation React Component with gsap

In this article, we will go through the process of creating an animation component in the React project with gsap. we will walk through three parts.

• Prepare SVG
• Wrap SVG in a React Component
• Turn SVG to the animation with gsap and React hooks

Feel free to scroll down if this article may be something you are looking for.

Let’s getting started!

Prepare the SVG

There are a few methods to retrieve SVG files.

1. Download free SVG sources

There are a bunch of free SVG icons, you can find the favorite ones from websites like unDraw, flaticon if you don’t want to take time to make one.

2. Create and export SVG from Sketch

Sketch provides basic operations of creating geometry icons.

• The advantages of Sketch include rich tutorials, communities, and plugins.
• Now it only supports macOS.