Page Loader, once only play

Hi everyone,

I’ve created a short branding animation to load the website, but only want to play once. Found the perfect solution here with @Finsweet but its become lost in translation and now nothing loads (white screen). Possible to have a look and see where I have gone wrong? Please and thank you!


Here is my site Read-Only: Webflow - See Crow Fly

http://https://see-crow-fly.webflow.io

Hi @Scott75,

Welcome to the forum! Hope I can help with this.

It looks like you’re just missing the / to close your script tag. Try adding this then republishing to see if this fixes the issue!

Let me know how you go!

Hi Milan,

You are amazing for getting back to me so quickly! The good news is the site now plays fine, the bad news is the cookie blocking hack doesn’t do anything so the animation continues to play. I did notice however that I had the code in the wrong spot; I used an embed code box placed first underneath body with the code contained in that, didn’t work, so placed it inside tag of the home page, still didn’t work.

I have thought of one more work around though, and unfortunately this would take some time, but I could simply duplicate the whole home page, rename it “something else” and redirect all pages back to that? In theory the animation sequence is only triggered by going back to “home”. This would also mean the user would see the animation every time they reload the site instead of an arbitury time set in cookies?

So if you think this is an interesting work around - the million dollar question is, to save myself all the extra work, can I one click “duplicate” an entire page, inner links and animations included?

Otherwise included below is where I’m at now; Site works fine but continues to play video every ‘home’ reload

Hi @Scott75,

Try replacing your code with this, republish and test:

<style>
.background-video {
  display:none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) { 
  const backgroundVideo = document.querySelector(".home-page");
  const scfLoader = document.querySelector('.background-video');

  const seenAnimation = Cookies.get('seenAnimation');
  if(!seenAnimation){
    scfLoader.style.display = "flex";
    setTimeout(()=>{
      backgroundVideo.style.display = "block";
    }, 6000); 
    Cookies.set('seenAnimation', 1, { expires: 1 });
  }
  else{
    scfLoader.style.visibility = "hidden";
    backgroundVideo.style.display = "block";
}
});
</script>

Let me know how you go!

1 Like

Boom! You are a legend!

Works a charm, I’ve got to run but I’ll come back and study this to understand where I was going wrong better for next time, but in the mean time, thank you!

1 Like