Preloader & Images scrolls sequences

[BigHoot]

Hi guys, I'm back for another question !

So today's problem is quite different.
I've added another animation using three.js this time. This plus the images sequence makes the whole thing quite heavy to load (30mo average). 
So I wanted to create a simple preloader using DOMContentLoaded & window.onload as already suggested in a thread here.

Yet, the gsap animation doesn't appear after loading time is done. 
The codepen I provide only shows a small portion of code but I tested my script on this : 
https://www.bighoot.net/

Since the codepen is fast to load, it's hard to guess a thing. Yet, when I tested on my own page, it does take a certain amount of time (roughly 6/7 second with my connection).

So once again, if you guys have an idea, I'm up to it ! 

See the Pen NWMaeMX by hopyrevenge (@hopyrevenge) on CodePen

[Rodrigo]

Hi,

 

There are a few issues in your code (at least the codepen example) that throw some errors and exceptions that prevent it from running normally.

 

In this case there is no element in the DOM with an h2 class, nor there is an <h2> tag. Same thing with the selector class ".firstSection", so that GSAP instance is just not happening:

gsap.to(".h2", {
  scrollTrigger: {
    trigger: ".firstSection",
    markers: true,
    start: "top top",
    end: "+=400",
    pin: ".firstSection",
    scrub: 2,
  },
  opacity: 1,
  y: 200,
});

Here there is no element with the id wrapper, so that throws an error because it can't read the property style of null:

function domloader() {
   document.getElementById("wrapper").style.visibility = "visible";
}

Finally, a good idea is to create the ScrollTrigger instance after everything is loaded, even though all your elements reside inside the canvas renderer, is a good precaution just in case something else fails.

 

Please update and correct your codepen sample and let us know if you keep having issues so we can take a look.

 

Happy Tweening!!!

[BigHoot]

Hey ! Thanks for the answer

I'm sorry, I just did sh@!#t. I tried using the previous codepen I made for you but I forgot I changed few things here and there. It should be better now and clearer ! 
The #wrapper in the codepen also exists in my portfolio project and it basically takes everything but the loader. The goal is quite simple. If dom is not fully loaded, #wrapper is hidden and #loader is visible,  when dom is fully loaded, #wrapper switches to visible, #loader switches to hidden. 


 

[Rodrigo]

Hi,

 

This seems to be more related to CSS than anything else. Your canvas element has a fixed position, any reason for that? and it gets behind everything. If you want to keep it on top of everything with a fixed position, it needs an actual position (top: 0, left: 0, etc.).

 

This seems to fix the issue

canvas {
  display: block;
  object-fit: cover;
  position: fixed;
  width: 100vw;
  height:100vh;
  top: 0;
  left: 0;
  z-index:10;
}

Let us know how it works.

 

Happy Tweening!!!

[BigHoot]

Oh man I feel so ashamed...

I don't even have the words. It's been so long I'm working on these animations that I'm loosing my mind. I've never touched this since the very first iteration of the image sequence and I had no problem until now. I just skept the possibility I messed the CSS.

Now I have another confusing problem but I'm afraid is has nothing to do with GSAP but Three.JS ^^

Thanks again mate for your help ! ❤️❤️