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

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