Streaming live at 10am (PST)

Preloader is triggering on each breakpoint

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?


Here is my public share link: LINK

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.

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.

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

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

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

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

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)

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

HI @zellet Im just checking on this example as I can’t actually remember what I have done :innocent: 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. :thinking:

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

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

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. :wink:

1 Like

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) :wink:

1 Like

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

1 Like

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.

1 Like

I had the same issue. I think load event triggers on each breakpoint if there’s any other trigger on the page that depends on breakpoint (e.g. only for desktop, only for mobile, etc.).

I solved the issue by writing a page load trigger with custom code instead of Interactions panel.