DEV Community

Cover image for React + GreenSock Integration
Christopher Daniel
Christopher Daniel

Posted on • Updated on

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 -------
            }
        )

Enter fullscreen mode Exit fullscreen mode

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

The full code is available on github github repo

Top comments (3)

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

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

Collapse
 
chris_daniel profile image
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.

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

haa, nice you have corrected the links great