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!
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!
Hello @Scott75 thanks for your contribution. i’m currently facing this same issue but the code does’nt seem to be working for me. please do you have any suggestions for me? i’ll be looking out for a reply Thanks!
ps. i tried using finsweet to solve the issue but it persisit still.
the read-only link: Webflow - justjames.pxl
@mww I was wondering if you could help me as well please. I’m trying to get my confetti Lottie animation that plays on page load to only play once per user or once per 14 days. I’ve tried a lot of custom code to get this to work but sadly am hitting a wall.
Any help is greatly appreciated!