Issue using .from() tweens on a page with React Transition Group

[mrbjjackson]

Hi there,

 

Firstly let me say that I'm so impressed with GSAP and the documentation and forums! An amazing resource.

 

I wonder if you could help me understand a problem I'm having.

 

I have a React project (it's a Gatsby site) that is using the plugin "Gatsby Transition Link" for page transitions. I believe this plugin uses React Transition Group to get the page transitions done.

 

Anyway, the page transitions are working fine. I'm not using GSAP for them - just CSS animations triggered from the "--entering" and "--exiting" classes that are added to the incoming and outgoing pages.

 

My problem comes when I want to add a separate GSAP animation to the page content. I've got this working with one page perfectly. I have a nice animated timeline running on it.

 

However when I add GSAP timeline to another page, it breaks my CSS entering and exiting transitions. After a lot of bug-fixing I've narrowed it down to the second page using "tl.from()" tweens whereas the other page only uses "tl.to()" tweens. I presume that this something to do with the way "from()" works, perhaps the way it renders the page. But I don't know how to fix it.

 

So my question is: can you help me understand what might be going on when I call "from()" that might be break my css page transitions. Can you point me in the direction of a solution to this problem?

 

Any help you can offer would be much appreciated. Thanks very much.

Ben

[mrbjjackson]

As often happens, posting my support request has caused me to think about my problem a little deeper and I think I've found a solution.

 

For anyone else who reads this:

In the from() documentation there is a parameter called immediateRender.

If I set that to false, my page transition works fine.

Thanks, B