Avoid blink - Window: load event - Animation start delay

[giorgarasae]

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.

[PointC]

HI @giorgarasae 

 

Welcome to the forum.

 

I think this tip about FOUC could solve this for you.

 

Happy tweening and welcome aboard.

 

[giorgarasae]

Hi @PointC!

 

Thanks! This is the exact video I followed to avoid this blink and it worked great. Actually, you will see my init() function taken from there.

 

I guess that this is the best way to do this and the rest is related to the page optimization...

 

Thanks again!

[giorgarasae]

Allow me to make it more clear. This video is helpful and that's the exact way I've implemented it on my website.

 

But let's say that a page loads a gallery of 20 images before the footer. This function that I've used and the video suggests

 

function init() {
 //all my GSAP here, for all pages
}

window.addEventListener("load", function(event) {
	init();
});

, will wait until everything on the page loads, even the "heavy" footer gallery, and only then will start playing the above the fold animations.

 

And that's the problem. Waiting for a full page to load to play an animation above the fold compromises UX because user can't see anything before every single part of the page is loaded. I can't think of a way to avoid this and the FOUC at the same time, but someone more experienced than me may find a way!

 

It's a pity having to wait for google analytics or tag manager to load and then play the animation, for example.

[OSUblake]

Are you images part of the animation? I would just say don't listen for the load event.

[giorgarasae]

Images are animated. But how would you avoid FOUC without using the load event?

[OSUblake]

Just use the same technique, use opacity as 0 in your CSS, and animate to an opacity of 1.

 

If an image isn't hasn't loaded when it should be visible, maybe use a blurry svg or base64 image as a placeholder. 

[giorgarasae]

Hi @OSUblake!

 

I think it works and you were right on the load event. Your comment made me try DOMContentLoaded instead of load and since the animation above the fold is mainly the text, it works! The first image has the time to load until the timeline is over and it looks great.

 

Thanks a lot!