How to combine windows load to gsap setup reveal

[Bayu Handono]

How to insert/combine window load(loading until all page loaded) to function "setup reveal" in gsap. So, the page load all resource before star animation. Like this:

 

window.addEventListener("load", () => {

  const tl = gsap.timeline();

  tl.to(".loader", {

    delay: 2,

    opacity: 0,

    duration: 1,

    ease: Power3.easeOut

  });

 

function setupReveal(container) {

  container.ctx = gsap.context(() => {

 

//gsap code...

 

});

}

 

Like this but combine windowload with function setup reveal, ctx context :

See the Pen oNmjaWb by byhndo (@byhndo) on CodePen.

[Rodrigo]

Hi,

 

If you want to use GSAP context maybe you can create a global GSAP Context instance outside the load event, like this:

let ctx;

window.addEventListener("load", () => {
  ctx && ctx.revert();
  ctx = gsap.context(() => {});
});

But that wouldn't make a lot of sense since the load event will trigger only once in the life cycle of the page/app.

 

The setup you have right now is the goto approach and a very solid one, so I'd keep using that.

 

Let us know if you have more questions.

Happy Tweening!