React + GreenSock Integration

React + Greensock

I will explain you how to integrate GSAP animations to React application.

demo: GSAP

Using create-react-app create your react application setup.

Now the react application setup is done, we have to add green sock for animation.

Now you can see the react icon spinning with the help of css animation. We have to convert it to GSAP.

Change App.css. We are removing all the animations.

Its time to add GSAP animation ...

To add animation to an element using GSAP we need a reference for the element in react. I'm going to use useRef() hook.

Now I will show how to get reference to the element using callback ref

You can see the element in the console.

TweenMax

TweenMax in a animation util from greensock. To learn more about TweenMax visit tweenmax.

Inorder to rotate the div we have to use

   TweenMax.to(
            logoElement,                  // reference to the element 
            1,                            // duration 
            {
                repeat: -1,               // infinite loop of animation
                rotation: 360,            // 360deg rotation
                ease: Linear.easeNone     // linear speed no acceleration -------
            }
        )

Now we can add the animation when the component mounts.
Here is the final version

The full code is available on github github repo

Comments

[🚩 Atul Prajapati 🇮🇳]

i think it's Totally fack because all links are fack

[Christopher Daniel]

Hey,

just copy the link and try instead of using anchor tag, I think the links are messed up. I'll correct it.

[🚩 Atul Prajapati 🇮🇳]

haa, nice you have corrected the links great