Simple React/GSAP animation

[mb2233]

Hi GSAP community,

 

Let me start out by saying that I'm very new to React, but I'm looking to do a smooth animation on page load using GSAP. I've done several animations before using GSAP, but when it comes to React, animation just seem really complex. Right now, all I'm looking to do, is having my loading screen, slide of to the right using Expo.easeInOut after a couple of seconds, revealing the page beneath it. But all documentation about animating in React seems extremely complex, compared to what usually takes 2-3 lines of code to do. 

 

Can anyone of you help? Thanks!

[Rodrigo]

Hi and welcome to the GreenSock forums!!!

 

This always seems more daunting that it really is. All you have to do is create a reference to the element you want to animate, create a GSAP instance for the animation in the componentDidMount event and then play the animation when you need it.

 

Here's a simple codepen that does exactly that:

 

See the Pen yKVJvP?editors=0010 by rhernando (@rhernando) on CodePen

 

Now if you check the code you'll see two references  set to null in the constructor method, the loader wrap and the reference that later will be used to hold the GSAP instance. These are useful if you later want to use them again so you can set the position of the loader wrap to make it visible again and then you want to play the animation to remove it. The loader wrap reference is set in this code:

<div className="loader"
  ref={div => this.loaderWrap = div}
>
  THIS IS THE LOADER WRAP, PUT YOUR SPINNER HERE!!!
</div>

Here the ref property is passed a callback that takes the React node being mounted as a parameter and sets it as the reference called loaderWrap. In this case the node is the actual div that will be rendered in the DOM, which is what GSAP uses to animate.

Finally the GSAP instance is created in the componentDidMount method to ensure that the DOM nodes are actually mounted and rendered by that time.

 

Happy Tweening!!

[mb2233]

Thank you so much Rodrigo! It works perfectly! 

[pcdavis]

Any chance you could take a look at my codepen? I can get my GSAP svg to work without React. But, as soon as I try to place it inside a React component, it doesn't show up. I am not quite sure how to create and render React components inside of codepen, so I followed the example you showed above. Below I am pasting links to the codepen where the GSAP svg works (non-React) and the broken one (React). I would be grateful for any help.  If you know of any npm packages that help GSAP and svg in-general work well with React, please let me know. Thanks again. Paul.

 

Broken React version: 

See the Pen wmdpzK?editors=1010 by pcdavis (@pcdavis) on CodePen

 

 

And here is the version that works without React:

See the Pen BrRJaB?editors=1000 by pcdavis (@pcdavis) on CodePen

 

[Rodrigo]

Hi,

 

There were some issues with your code. In react inline styles are not applied like in regular HTML, take a look at the official React docs:
 

https://reactjs.org/docs/dom-elements.html#style

 

In that case is better to move the styles to the css file (SASS in the codepen).

 

Then you're creating the TweenMax instance before the react class is even created, so when GSAP is instantiated there's no DOM element with the ID you're pointing to in the GSAP instance, so that throws an error as well.

 

This code seems to do what you're expecting:

 

class SvgReddit extends Component {
  constructor(){
    super();
    this.startPath = null;
    this.endPath = null;
    this.svgTween = null;
  }
  
  componentDidMount(){
    this.svgTween = TweenMax.to(this.startPath, 1, {
      morphSVG:{shape: this.endPath, shapeIndex: 12},
      fill: "#ff0000",ease:Bounce.easeOut
    });
  }
  
  render(){
    return (
      <div>
        <svg id="Layer_6" data-name="Layer 6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 136.66 171.86">
          <defs></defs>
          <title>redditlogo</title>
          <path ref={path => this.startPath = path} id="start" className="cls-1" d="..." />
          <path ref={path => this.endPath = path} id="end"  className="cls-2" d="..." />
        </svg>
        <h1 onClick={ () => this.svgTween.play() }>Devil</h1>
        <h3>or</h3>
        <h1 onClick={ () => this.svgTween.reverse() }>Angel</h1>
      </div>
    );
  }
}

 

Also this code should be compatible with the latest version of react and respects the deprecation of the strings refs by using the callback to assign the DOM nodes in a declarative way.

 

See the Pen wmdZPM?editors=0010 by rhernando (@rhernando) on CodePen

 

Happy tweening!!