Fixing GSAP Animation Bug on Homepage

[taskade]

Hello everyone!

 

We're facing an odd animation issue on Taskade's homepage (https://www.taskade.com/) in incognito mode. The grid bounces twice before the video loads, a bug we haven't been able to replicate locally. This might be linked to Cloudflare caching.

 

In our local environment, the background and video fade in together smoothly, just once. However, in production, there's a noticeable double animation: the background fades in first, followed by the video and background together.

 

We suspect the Cloudflare CDN might be caching the content for faster page load, causing the animation script to run only afterwards. Can any web devs or animation experts help us figure this out or offer some insights? Your expertise would be incredibly helpful!

Thanks so much in advance for your assistance!

[Rodrigo]

Hi,

 

I've never seen anything like this TBH but definitely something is triggering some init method or something like that twice. Maybe use a boolean to either check for incognito mode:

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/windows/getLastFocused

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/incognito

https://nisar1406.medium.com/detecting-the-incognito-window-in-the-browser-be2afd8a103

 

https://www.npmjs.com/package/detectincognitojs

 

The other is check how much time takes between one load and another and perhaps create a timer (similar to a debounce method) in order to call the method only once, but that would imply an extra delay in your site, granted it wouldn't be a lot though.

 

The other is just create a boolean and toggle it the first time the code runs.

 

Hopefully this helps.

Happy Tweening!

[taskade]

Thank you! Will give this a try and report back.