DOM loaded

[Mattes]

 

Hello everyone,

I want to start an animation as soon as the DOM is fully loaded. Otherwise the animation flickers. Is there a solution for this?

 

Thanks for help

[Rodrigo]

Hi,

 

You might want to use the DOM Content Loaded event for that and run your GSAP code in there:

https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

 

If you keep having issues, please include a minimal demo so we can get a better look at what could be the problem.

 

Happy Tweening!

[Mattes]

Thanks for your answer but I think that's the wrong one. My entire website contains a wide variety of animations on the page. Images that are loaded in the div as background are animated using classes in gsap. This all works wonderfully, only partially when the sources (images, CSS) are not yet loaded does it start to flicker. I need something where everything is loaded first and only then starts.

[Rodrigo]

Hi,

 

Maybe take a look at this code for the images:

https://imagesloaded.desandro.com/

 

As for the styles, most likely those will be loaded and applied once the images are ready. If you rely heavily on those type of elements, it would be better to create an overlay in your site that indicates that the content is loading so your users know that they'll have to wait a bit.

 

Also take a look at this:

https://javascript.info/onload-ondomcontentloaded

 

Happy Tweening!

[Mattes]

OK thank you.

That with an overlay sounds good, but how do I get that properly synchronized between my animations, images and CSS data? Do you have an example for me?

[Rodrigo]

Hi,

 

I'm a bit confused about your last question. Normally what you need to watch for is for the images to be loaded, as I mentioned is highly probable that the styles are loaded and applied by then. Just create an element that sits on top of everything with some inline styles (no need for a stylesheet in this case). When all the images are loaded, run your GSAP code, could be a function or set of functions, or everything inside the loaded event handler, I leave that choice to you, and finally hide the overlay.

 

As I mentioned before is better to have a minimal demo in place so we can take a look at what you've tried so far and how can we help. On top of that this is basically how you should structure websites/apps and not specifically a GSAP-related issue.

 

Happy Tweening!

[Cassie]

Also maybe? 

 

 

[Mattes]

Hi Cassie, hi Rodrigo,

 

thank you for your feedback. I watched Cassie's video once and tried to implement it, unfortunately without success. Here's an example:

 

function init() {

gsap.from(".fond-home", {opacity: 0, duration: 1, autoAlpha:0})

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

});

Can't get the .fond-home class addressed. Do I have an error in the syntax?

[Rodrigo]

Hi,

 

Is really hard to see anything without a minimal demo actually.

 

In the code you posted the only thing I see is that there is a missing curly bracket for the init function (the closing one).

 

Also there is no need to animate both opacity and autoAlpha, they both tween the opacity property value. The only difference is that autoAlpha also toggles the visibility property of the DOM element from visible to invisible.

 

Happy Tweening!