Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
connorv

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

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

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/

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×