Tween starts after React document loads.

[Rick May]

Disclaimer:  I've just started working with React.  

 

I searched far and wide to try and find a solution.  The closest I've come within this forum:

 

The first reply from Rodrigo demonstrated how you can start a tween from componentDidMount.  However, the tween is starting from a delay instead of when the site has finished loading/rendering.  I've made my own example that simply loads a large image from placekitten.com.  I'd like the tween to start after the image has fully loaded.

 

https://codesandbox.io/s/3141jvqkwm

 

Unfortunately, componentDidMount() is not doing what I expected it would.  It is playing the tween before the image has finished loading instead of after.  While this is most likely more of a React issue than GSAP, I've struggled to find a solution anywhere (including using an event listener inside of componentDidMount). 

 

I figured someone here has successfully triggered an animated transition from a loader screen to the site after it has fully loaded.  Anyone know how I can achieve this?

 

 

Thank you.

Rick

 

 

See the Pen by s (@s) on CodePen

[Rodrigo]

Hi Rick,

 

First in your code, the Timeline is not paused:

 

// this timeline is active after being instantiated
this.theTween = new TimelineLite({ paused: false })

 

Switch that to false and the timeline will be paused.

 

If you want to wait for the image to be loaded, what I would do is wait for the onload callback of the native image API and start the animation then. Something like this:

 

class App extends Component {
  constructor(props) {
    super(props);
    this.animateMe = null;
    this.theTween = null;
    this.preLoadedImage = null;
  }

  componentDidMount() {
    this.theTween = new TimelineLite({ paused: true })
      .to(this.animateMe, 1, {
        x: 100,
        y: 500
      });
    this.preLoadedImage.onload = () => {
      console.log("image loaded")
      this.theTween.play();
    }
  }

  render() {
    return (
      <div>
        <div ref={div => (this.animateMe = div)}>
          Animate me after everything has loaded
        </div>
        <div>
          <img src="http://placekitten.com/4322/1220" ref={img => this.preLoadedImage = img} />
        </div>
      </div>
    );
  }
}

 

Also you can use this tool:

 

https://www.npmjs.com/package/react-preload

 

Happy tweening!!!

[Rodrigo]

Sorry I made a mistake and can't edit the post, perhaps there is a small technical issue with the forums now.

 

Here: 

2 minutes ago, Rodrigo said:

Switch that to false and the timeline will be paused.

 

Should say:

 

Switch that to true and the timeline will be paused.

 

Sorry about that.

[Rick May]

Thanks for the response.  Yeah, I had that set to play instead of pause because I mistakenly thought that componentDidMount() didn't fire until everything was loaded and rendered.  Once I realized that wasn't the case, I just left it cause I didn't know what to do next.

 

I'll check out the preload thing.  I guess I was hoping there was something like window.onload that would wait for not only all images on the page (not just the ones I would have to reference individually), but any scripts too.

 

Thanks