Hello everyone! I'm new to GSAP and I'd like to start by thanking everyone who participates here. It's a great source for newbies.
I'm using the platform for the first time on my personal website and been trying to solve some issues for a while.
First, trying to avoid a "blink" (where the text appeared, then disappeared and then got back but animated), I ended up using the part of code below so that animations start when page loading is finished. I don't know if it's the best way to do this (feel free to help!), but it worked.
function init() {
//all my GSAP here, for all pages
}
window.addEventListener("load", function(event) {
init();
});
The problem I'm facing now is the delay of the animation start, because of the page load.
On lightweight inner pages (no images for example), it works very well. But on pages where I load some high res. images, page loading takes longer and as a result animations are delayed and UX is compromised.
This is a live page where you can see the problem (all case studies actually, because of the images), compared to this one for example (no images). Clearing cache and refreshing both will help you notice the difference.
So my question is, is there a better way to avoid blinking (because .js still hasn't kicked in) and also avoid this delay or at least make it minimal?
Thanks a lot!
George.