I am creating my first site using Webflow (with experience of Wordpress, GitHub etc.) so slightly lost on this one.
My site has a loader animation (set up as a component) which I would like to only play the first time someone opens the homepage (ie. not when they go to my About page, then back to Home etc.). I’ve found the Finsweet video below, and tried inserting the code into the homepages header but it doesn’t appear to have made any difference and the loader still plays every time.
There is definitely a better solution out there, but I just want to share my approach.
To achieve this, I would store a cookie after the first time the user has visited and check if that cookie has been stored when loading the page, if so, don’t load the animation. Now the second part would be to find a way to change the value of that cookie (once every day for example), and compare the one that is already stored on the user device to show the animation again.
This is a piece of code that I wrote for a client that wanted to show a banner (with text linked to a CMS item) that can be closed by the user and disappears forever until the text has been edited, then it reappears for everyone.
if (typeof currentAnnouncement !== 'undefined') {
const showMsg = localStorage.getItem('showMsg');
const announcement = localStorage.getItem('announcement');
localStorage.setItem('announcement', currentAnnouncement);
if(announcement == currentAnnouncement){
// Announcement should not show
$('.section_announcement').hide();
}else{
// Announcement should show
$('.section_announcement').show();
localStorage.setItem('showMsg', 'true');
}
if(showMsg === 'false'){
$('.section_announcement').hide();
}else{
$('.section_announcement').show();
}
$('.announcement_close-image').on('click', function(){
$('.section_announcement').fadeOut('fast');
localStorage.setItem('showMsg', 'false');
});
}
});
All of this might be a little far-fetched, but I hope it helps you in the right direction. Let me know if it’s usefull to you!
