Make your React components to move smooth — GreenSock

While working on different projects in ReactJS, I noticed that my components are disappearing and appearing quite suddenly and for a professional website (this is my goal — creatin professional web apps)
it’s not right.
I start researching about best animations framework, and I found out about GreenSock.
GreenSock is a JavaScript toolset that turns developers in animation superheroes, which is not what I was looking for as I was looking for simple animations like fades. But! I found this toolset very easy, and helpful for any kind of needs.
To start using it in React is as easy as :

npm install gsap

Then importing it in your React component is like any other import

import gsap from 'gsap';

And now the fun part. Let’s create a very basic one — Once the component will load on the page to do it in a nice and smooth fade.

Let’s take a simple component.

To create the fade effect I will set the style of the class to opacity 0.

.im-fading {
  opacity: 0;
}

Creating the animation will take only one line of code.

fade = () => gsap.to(".im-fading", {opacity: 1, duration: 1})

And the best place to call this function is somewhere where it will runt anytime the component will load. You guessed, componentDidMount() lifecycle method.

In this way, you can create a nice fade-in effect for your components.

There are a lot more to discover on GreenSock docs.