[Animations break on window resizing (React)]

@Rodrigo @ZachSaucier I think I got it sorted.  Using a combo of all your advice (formTo, removing Timelines from some places and adding the tl.clear(), etc) I think did the trick. 

 

Push to my live site and as far as I can tell all the content stays on the screen no matter the width size and the animations fire more consistently. 

https://gedalyakrycer.com/ 

 

Thank you for all your help. 

[Animations break on window resizing (React)]

Hi @ZachSaucier and @Rodrigo thank you so much for your responses and insight!! 

 

I tried moving the saveStyles into the useEffect and that worked for the body text, but the bio headline text is still disappearing when resizing the window. I did add an overall scroll triggered effect to the body text container, so it fades in, so could it be that is screwing with the title now? 

https://github.com/GedalyaKrycer/gedalyakrycer.github.io/blob/gsapBackup/gk-portfolio/src/components/Bio/index.js#L72-L76

 

 

On my local dev environment I am getting a bunch of visual errors until I scroll down and then back up the page. (5-6seconds starts how I intended it to work, with the body text scrubbing in staggered, once the page is midway scrolled up.) https://drive.google.com/file/d/1p0rFmDu1R4xhP9-C-LjqmxoJOYQUANGv/view

 

However, once I host the built version of the site, most of the glitches go away, except for the Bio title disappearing. 

https://gpstaging.netlify.app/

 

Very odd indeed. 🤔

[Animations break on window resizing (React)]

Hi there, I am running into an odd issue with my React site and using GSAP. 

 

Website: https://gpstaging.netlify.app

 

For all the scroll based triggers, if I resize the window they will either disappear https://take.ms/6VGoD or not fire their animation when scrolling down the page.

 

It looks like they disappear because an inline style of opacity: 0 and visibility: none is getting applied to them. But I have no idea why and even when I removed all the other components that had GSAP animation applied, the styles keep showing up.

 

Here is a simplified demonstration of the items disappearing once the window get's resized a few times. 

https://codesandbox.io/s/festive-feistel-puiib?file=/src/App.js

 

For the full production code version, please see the below Github link.

https://github.com/GedalyaKrycer/gedalyakrycer.github.io/blob/gsapBackup/gk-portfolio/src/components/Bio/index.js

 

I suspect I am not using the useRef correctly and maybe there is issues with having multiple components that have GSAP on it. But I am not sure how to troubleshoot it. 

 

Much appreciation for any insight.

Gedalya