GreenSock Animations

A few weeks back I had an interview with a really great company. The interviewers were really awesome and made the experience not as nerve-racking as I expected. During my interview the senior developer mentioned GreenSock Animation Platform and told me a bit about it. Well I was intrigued and decided to see what it was all about. So I read up about it and found some tutorials to learn how to implement it. I have always wanted to learn how to make animations for my sites and I was exciting to give this a try.

I created a new React application and installed GreenSock using the command npm i gsap. I then imported TweenMax and Power3 from gsap. I also imported useRef, useEffect and useState from react.

I removed all the logo and code that came with the new React application. I used CSS to output three circles to the page and styled them with color. Each circle was placed inside their own individual <div> which was placed inside a main <div> container. I declared variables and placed useRef inside of them and console logged to make sure it was working.

For example:

let circle= useRef('hello');
console.log(circle);

That gave me “hello” printed in the console. I then set it to null. The ‘hello was just for testing purposes. So it was time to actually use that. So I then had to ref a function and equal that to the name of my variable. You can name the function anything I just kept it as ‘el’.

<div
            ref={el => circle = el}
            className='circle'>
</div>

Now the whole reason for this is that whenever I set animations to the variable ‘circle’. It will be referencing that div and show the changes there. So now I used Tween to animate the circle. Tween is what does all the animation. You give it the target and objects you want to animate and duration as well. I am using ‘useEffect’ as a function and placing the animation inside.

TweenMax.from(circle, .8, {opacity: 0, x: 40, ease: Power3.easeOut});

In order not to repeat this 3 times for each circle. I was able to use this.

TweenMax.staggerFrom([circle,circleRed,circleBlue], .8, {opacity: 0, x: 40, ease: Power3.easeOut}, .3)
  },[])

So pretty much the way this looks now. Is that the circles will load and appear in 3 second intervals.

Now to add just a bit more to this. The goal was to click on one of the circles and then have it be enlarged and then click on it again and have it to back to its default size. So I made a function that I will call as an event on that specific <div>. One function is to expand it and the other is to shrink it.

const [state, setState] = useState(false);
const handleExpand = () => {
    TweenMax.to(circle, .8, {width: 200, height: 200, ease: Power3.easeOut})
    setState(true)
  }
const handleShrink = () => {
    TweenMax.to(circle, .8, {width: 75, height: 75, ease: Power3.easeOut})
    setState(false)
  }

Now I had to write a condition so that when its clicked the first time it the circles enlarges and then when clicked again the circle shrinks.

<div
            onClick = {state !== true ? handleExpand : handleShrink}
            ref={el => circle = el}
            className='circle'>
</div>

I did a bit more than the tutorial and added animation to each circle so that they can all have that animation as well.

So there you have it folks! This was really fun to be able to learn about this and I am super excited to try it on a much larger scale!

Tutorial by: Wrong Akram ( I am super grateful for your tutorial and you were very easy to understand)