Interactive Smile using React + GSAP

Integrating GSAP with your React application

What you’ll be able to do

Demo

Installing GSAP

I like to install GSAP using npm. If you’d prefer to use yarn or another method, check out the various installation methods in the GSAP docs.

$ npm install gsap

Next you’ll import GSAP at the head of the file, here we are going to use TweenMax and Power3.

import { TweenMax, Power3 } from 'gsap'

Now your file is ready to call GSAP methods.

You have to be familiar with how React Hooks work before you try out this tutorial. Next, import the react hooks.

import React, { useRef, useEffect, useState } from 'react';
import { TweenMax, Power3 } from "gsap";

Create the component to be viewed in the return statement.

Import the css for the component

import './App.css';

Now create a reference to each element that we have,

Inside useEffect, we are going to define the initial transition of circles from left and opacity using TweenMax.

Now, add the click handler on a circle with a useState to expand and shrink on toggle.

Define the GSAP Animations inside those functions.

And run your react app,

Voila!!! You will get the desired output :)

Github URL for the source code: https://github.com/aarushil/react-gsap

Happy Coding!!