Jump to content

Rick May

Tween starts after React document loads.

Recommended Posts

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.




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.




See the Pen by s (@s) on CodePen

Link to comment
Share on other sites

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) {
    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")

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


Also you can use this tool:




Happy tweening!!!

Link to comment
Share on other sites

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



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.

  • Like 1
Link to comment
Share on other sites

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.





Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.