Script is too slow, causing flashing. Using cookies with a GSAP autoalpha 'Click to enter page'

[connorv]

Because of the way this uses cookies I'm not sure if this will translate well into the codepen, but I tried my best.

 

 

You can see the page itself at https://chloeoneohone.myshopify.com/ with password paklus.

 

Basically what's going on is I have a div with id="overlay-wrap". This goes over the entire width & height of the page, absolutely positioned, top:0, left:0;.

 

 

Then i have this script that checks for cookies: 

window.onload = function () {
    if (document.cookie.indexOf("visited=") >= 0) {
  // They've been here before. So add hider class
  document.getElementById('overlay-wrap').className += 'hider';
}
else {
  // set a new cookie
  expiry = new Date();
  expiry.setTime(expiry.getTime()+(10*60*1000)); // Ten minutes

  // Date()'s toGMTSting() method will format the date correctly for a cookie
  document.cookie = "visited=yes; expires=" + expiry.toGMTString();
  
  
  var d = document.getElementById("xyz");
d.className += " no-freedom";
  
}
};

 

 

so what this is doing is checking to see if there's a cookie value already stored for "visited=". if there is any at all, it hides the class '.hider' to element #overlay-wrap.

 

.hider simply has 'display: none'

 

.hider {
  display: none;
}

 

 

so the whole point of this is to only show that overlay when a user HASN'T visited the page. The problem is that the script doesn't run fast enough - because it's initially set to show, the 'overlay-wrap' will briefly appear while the page is loading & then vanish once the script verifies that the cookie is in place.

 

To correct this I've tried the inverse - by default hiding the 'overlay-wrap' then using a '.show' class that sets display: block. I have the opposite problem with this method, the page will briefly show the content (that the goal is to have hidden behind the overlay-wrap) during page load. Of course the overlay-wrap is eventually shown after the script sees there is no cookie set, but ideally I don't have any page flashing. 

 

 

as you can probably tell, i'm kind of new to GSAP, so i'm not confident that there's a better method to do what i'm wanting..

See the Pen qMBpNm by connorv (@connorv) on CodePen

[GreenSock]

Welcome to the forums, @connorv. 

 

This doesn't really sound like a GSAP problem (we try to keep these forums focused on GSAP-specific questions). What exactly do you want to show while the page is loading and the script is parsed? It seems like that's what you've got to decide and then code accordingly. For example, you could have a generic "Loading..." overlay initially that either changes to your normal overlay or simply goes away once the cookie situation is figured out. Or you could just position your <script> tag in your HTML flow so that the overlay is at the top (first in the flow), then immediately after that is the <script> that contains the cookie logic, then the rest of the HTML. I suspect that part of the problem is that you're waiting for the entire page to load, then running your JS, right? 

 

Anyway, hopefully that gets you moving in the right direction. Enjoy the tools. Happy tweening!

[Sahil]

You can have either one or another. What you can do though is check referrer on your server side and decide which class to add, if it is your site then don't show loader if it is external url then show loader. If you don't want to mess with server-side then look into barba js http://barbajs.org/