Preloader is triggering on each breakpoint

Stan · October 19, 2020, 10:08am

Hi all, I have an issue with preloader. There is nothing special on this preloader only standard elements animations. My problem is that preloader is triggering on each breakpoint. I have tried while is loading and after is loaded with an identical problem. How to set preloader only once per visit (not a day) can someone help me out what I’m doing wrong? It’s there a way how to prevent this behaviour as I do not get why is triggering even when the website is already loaded?

Thanks

Here is my public share link: LINK

Stan · October 19, 2020, 8:34am

Please does anyone know why this happening?

EDIT: It’s really strange, I have nothing done and for now preloader is not triggering on each breakpoint and it behaves as it should be. I will keep this issue open just in case and see if it will happen again during the day.

anthonysalamin · October 19, 2020, 9:05am

You can make use of cookies to display an element only once per session if you don’t want an element to display everytime a user load your page.

Stan · October 19, 2020, 9:58am

hi @anthonysalamin I have read this article here on forum (trigger once a day) only briefly as I was just concern that loader should be triggered only once as standard behaviour and problem is somewhere else. I will definitely read this article again and set it up when need.

Thanks for your time and have a good one

zellet · January 9, 2021, 10:36pm

@Stan did you solve this? I’m having the same isse

Stan · January 10, 2021, 8:37pm

HI @zellet sorry for late response. I have rip off my approach from one of recent project and I left there only what you need and as bonus there is a cookies JS handler. Here is EXAMPLE you can study but there is no magic just custom animations

Here is also LIVE version

zellet · January 10, 2021, 8:58pm

thanks for that. I’m not seeing where your overlay is targeted with the cookies?

Stan · January 10, 2021, 9:02pm

Hi @zellet Cookies are separate thing that has nothing with preload this mean preload is not attached to Cookies or Local Storage. Preload is handled ONLY with WF Animation (on Page Load)

zellet · January 10, 2021, 9:05pm

of course i meant that im not see how you handled the animation in webflow so that it dosnt trigger on each breakpoint

Stan · January 10, 2021, 9:20pm

HI @zellet Im just checking on this example as I can’t actually remember what I have done but I’m convinced that is ONLY how preload is set and triggered. I will create another example from scratch just to be sure that all will work as in example I have posted. It should take me about 30min or so.

Stan · January 10, 2021, 9:56pm

hi @zellet here is a simple pre-loader EXAMPLE I have just created from scratch and it works as expected (doesn’t trigger on resize)

and here is LIVE link

zellet · January 10, 2021, 10:07pm

thanks for doing that! yeah i see its very simple, im double-checking mine and dont understand why it’s restarting at every breakpoin, would you mine taking a look? READ ONLY
LIVE SITE

Stan · January 10, 2021, 10:12pm

Hi @zellet of course but I will take a look on your project tomorrow as I’m in middle of something I would like to sort tonight. I will let you know If I will find where is the problem.

Stan · January 11, 2021, 10:06am

HI @zellet I have narrow down what element(s) is causing trigger on each breakpoint. You have to take focus on top row and content of columns (IMHO you should use Flex or Grid instead). Anyway, when you remove content of columns re-triggering stops. As you have on page some JS I can’t change (WF rules) you have to figure out exact problem. At least you know where to start to point exact cause.

NOTE: ONLY hiding content of Columns doesn’t work you have to delete these. So you can go one by one to pinpoint the problematic element(s)

zellet · January 11, 2021, 1:08pm

Interesting! I have a few interactions set on the content in those columns, so ill take a look! Thanks for taking the time

zellet · January 13, 2021, 2:12pm

In case anyone else runs into this issue, I think I solved it. I had two separate triggers on one element, one for desktop, and one for mobile. I did this because I had different hover states and interactions originally, but I ended up simplifying it and consolidating it to one interaction. For whatever reason, this was triggering the loader at each breakpoint.