When React runs a GSAP animation

[andymgar]

I'm wondering whether to migrate some stuff I have to React. It uses GSAP so I started reading this very helpful article...

Being relatively new to React I got a little confused by the section titled "Controlling when React runs our animation". I worked it out in the end and created a slightly revised version of the codepen example that I think is a little clearer, at least for the less experienced React-er, so I've attached it in case anyone finds it useful.

Andy.

See the Pen RwLjGxK by AndyMGar (@AndyMGar) on CodePen

[OSUblake]

Hi Andy,

 

What was confusing you in that demo? It looks like the only thing you changed was adding a ref for "renders", although I wouldn't say that is technically correct. The render happens when the count state changes.

 

[andymgar]

Hi OSUblake - you guys are so quick to respond it's scary, but in a good way.

 

Maybe it's my naïve way of thinking about this stuff (I am relatively new to React as said already), perhaps coupled with what a render actually means.

 

I see the red box spin, triggered by the change to "count", then a second later the blue box spins, triggered by a change to "delayedCount". I'm thinking of these as two renders - but currently the demo shows the render count increasing only by 1. Is there a better way to think about these "renders"?

 

Andy.

[OSUblake]

21 minutes ago, andymgar said:

I see the red box spin, triggered by the change to "count", then a second later the blue box spins, triggered by a change to "delayedCount". I'm thinking of these as two renders

 

Yeah, I guess that would be more accurate, although the focus of that demo was not about how many renders there actually are, but how to set up your effects so that they are called at the correct time. We wanted to highlight that this is probably not what you want as it will run on every render.

// runs on every render
useEffect(() => {
  gsap.to(q(".box-3"), { rotation: "+=360" });
});

 

I made a few changes to that demo. Is it clearer now? I'm open to any suggestions.

 

See the Pen RwVZEMg by GreenSock (@GreenSock) on CodePen

 

 

[andymgar]

Looks good - thanks for that. Yes, I can see it wasn't the original focus of the demo.

Andy.