SVG and GSAP Animations In React

I always loved animation and cool moving objects while designing a website. Then I found SVG images that can be animated easily using CSS, JavaScript. This is a basic starting guide of using GSAP to animate SVG in React.

GSAP Animation that makes it really easy to create rich animations and UI’s on the web. The image below is the SVG image I animated using GSAP and some CSS, here “onClick” the animation toggles between day theme and night theme.

You can get an SVG image online or you can use Inkscape (Free tool) to draw your own SVG image.

To start in React simply paste the SVG code in one of the components you want. An example of a simple circle SVG is given below.

<svg className="test" onClick={this.handleSvgClick} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" fill="black"/>
</svg>

Next is to get GSAP

//1) Install GSAP
npm i gsap
//2) Import GSAP
import {TweenLite} from "gsap";

Finally, we can add animation to our SVG image, as an example, we will add animation to an onClick event.

handleSvgClick=()=>{
TweenLite.to(".test", 2, {"fill":"red"})
}
//COMMENT
//TweenLite.to(target, time, {type :  value} )

In the above code, the target is our className of the SVG, time is 2sec and we are changing the color from black to red, and it will only change the color on “onClick”. In place of type as “fill”, you can use width, height, top, ease, background-color, etc. I highly recommend trying GSAP animation if you have never tried it yet.