Streaming live at 10am (PST)

IX Bug - Intro animation replays when browser is resized across different breakpoints

Wondering if anyone has noticed this issue and has come up with a solution. For the longest time I’ve been trying to understand why my website designs keep reloading when I resize the browser or toggle my phone between portrait and landscape. This becomes noticeable and in a way looks unprofessional when a website has a loading animation, which replays when I toggle between different breakpoints. Most websites that I’ve come across don’t behave this way, meaning that unless I refresh the browser their loading animations play only once, regardless of how far I manually change the browser size. What’s even more frustrating is that some other elements such as slider animations and position of elements also fall apart and appear faulty, unless the browser is refreshed and its size stays the same.

After countless hours spent experimenting and adding/removing elements, I finally figured out why this happens. Not sure if it’s a webflow bug or not but basically it all has to do with “triggers on breakpoints” being checked on or off. If I have an interaction that’s meant to play on all breakpoints, meaning that its trigger settings are checked on all desktop, tablet, phone landscape, and portrait breakpoints then the website behaves normal, page intro animation plays only once, and all elements behave correctly no matter how far in/out I drag the browser. However, if there’s even one interaction in an entire website where its trigger is checked off on either one of the breakpoints, then the website replays the intro animation and elements fall apart upon resizing the browser.

I’m sure we can all agree that this is beyond frustrating as most of us would like to have interactions play only on certain breakpoints. If for example, I was to add a horizontal scroll interaction on a section for desktop, but have the section scroll vertically on mobile, I would style that section accordingly for each breakpoint and set the interaction trigger to ON only for desktop. This way the browser reloads on different breakpoints. To prevent that, I’d have to set the trigger ON for all four breakpoints but then I’d be stuck with a horizontal scroll interaction all the way.

To demonstrate this, I’ve included two separate sample projects here:

1) IX trigger ON for all breakpoints:

Public share link

Published site

Here, on the “Hover-Wrapper” div block, the mouse move animation trigger is CHECKED ON on all 4 breakpoints. The loading animation only plays once regardless of the breakpoints you enter. The website behaves as it should, but it has the limitation of applying ALL interactions on ALL breakpoints, thus choking one’s creative flow!

Resizing - Triggers ON

2) IX trigger ON for desktop but OFF on other 3 breakpoints:

Public share link

Published site

Here, on the “Hover-Wrapper” div block, the mouse move animation trigger is CHECKED ON for desktop and OFF on all other breakpoints. The loading animation plays every time the browser is resized to a different breakpoint, which is annoying and has bad UX all around.

Resizing - Triggers OFF

Another instance where this problem becomes a pain in the butt is when for example the viewer clicks on a lightbox element to view a gallery on mobile portrait. The lightbox opens on top of everything else. Now if the viewer wants to get a better look at the pictures by flipping the phone to landscape, the lightbox stays on top but behind it the website reloads.

Sorry for the length of this post but I wanted to make sure that the issue is thoroughly explained. Having to apply interactions to all breakpoints to avoid running into this issue is definitely a major problem. Hope someone has a solution to this. Thanks in advance!

Hi @SamHesami I have checked your example and there are some misconceptions how things should be set. As WF pre-loaders are working as they should I have made short video where I am trying to explain how this should be set to make it work.

Hope that will help to clarify few things.

Hi @Stan and thank you so much for putting in the time and walking me through your technique to animate page loaders. The thing is that you’ve totally eliminated the page loader animation for other breakpoints, but that’s something that I’d like to have on all devices (just to give the website a few seconds to load images, etc).

This issue isn’t just about page load animations though. It happens even when a menu is open. It’s as if all properties reset to their original state upon resizing the browser, but only if one or more interaction triggers are CHECKED OFF for other breakpoints. In a scenario where all interaction triggers throughout the entire website are CHECKED ON for all breakpoints, then the properties don’t reset and the website doesn’t appear as if it’s reloaded upon entering new breakpoints.

To better demonstrate this, I went ahead and made two new projects:

1) IX triggers CHECKED ON for all breakpoints:

Public share link | Published link

Here, I’ve assigned a basic “pop” action when mouse hovers over the button, with triggers CHECKED ON for all 4 breakpoints. Once you click the menu icon, the menu items wrapper opens, and if you change the size of the browser it remains open until you close it. To me this is the ideal scenario, but all interactions have to be applied across all breakpoints.

menu-trigger-on

2) IX triggers CHECKED ON for desktop but OFF for other 3 breakpoints:

Public share link | Published link

menu-trigger-off

Here, the triggers for mouse hover effect are CHECKED OFF on tablet, phone landscape, and portrait, as you’d normally do so to apply the hover effect only on desktop and above. Once you click the menu icon, the menu items wrapper opens, but if you change the size of the browser it disappears (back to the initial hidden state).

There has to be a way to override/bypass properties resetting back to their initial states when toggling between breakpoints.

Hi @SamHesami I still do not understand what is your issue.

In example I have provided I have mentioned that you can turn off on page load for rest of viewports only if you want to. If you need animation to be triggered on each breakpoint you will keep these active CHECKED IN and only thing you should do is to hide element in animation panel as initial value.

Preloader Demo | Simple Custom Navs

@Stan I totally understand the trigger situation for playing the loading animation across different breakpoints. I’m going to give it a try and build the loading and menu elements as you suggested. What I’m having a hard time understanding is how come on example 1 of each of those two projects (the loading animation and the menu), both the loading and the menu behave correctly. Whereas the exact same designs, which I understand differ from your method, fall apart on the 2nd examples where some other interaction trigger is checked off.

The only difference between the two projects for the loading animation example was triggers being off on the Hover-Wrapper for the second project. And for the menu example, the only difference was that the Button’s hover animation trigger was only on for desktop on the second project.

If the issue was with how I set up the loading and menu wrappers (initial states hidden) then don’t you think that they shouldn’t have behaved correctly on their first examples as well?

@Stan I remembered that I’ve picked up my method of loading animation design from webflow’s own tutorial from 2018, where the preloader div is set to display none but its initial state is set to visible in the animation build and then set to hidden when the animation ends. You can check out the clip here: Build a custom preloader - Webflow interactions & animations tutorial - YouTube

I also just duplicated the first project and redesigned the pre loader as you explained, but the same thing happens. The animation replays when I resize from desktop to tablet. Why? Because the hover-wrapper trigger is only checked on desktop. You can check it on for other 3 breakpoints and preview it in webflow to see that loading animation doesn’t replay when you go across breakpoints.

Project link

Webflow - reloading-trigger-off2

Really appreciate your help man!

Hi @SamHesami I have tried to debug your project to find possible issue but I’m not able to replicate it. Anyhow, I have found some strange behaviour in your project Im explaining in video.

Hi @Stan
The animation works fine on my end if ALL triggers are ON too. No need to delete and re-assign the animation. The pre loading only replays if 1 or more of the triggers on the Hover-Wrapper are checked off.

I bet if you check off 1 of your hover animation triggers on your sample project then your pre loader replays on every breakpoint.

Hmm, that is interesting! It happened even if you check off pre-loader on one viewport and set hover for all viewports. I have tried set both identical way (switched off mobile on both) if there will be any change and no luck either. So this mean that they should be both set for all viewports, it looks like bug to me. You can ask WF Support about your findings what they have to say about this and post their response here if possible.

@Stan I bet this happens on most webflow-built websites as they have at least one interaction with a trigger off on one of the breakpoints. I’ve noticed it in so many webflow templates as well.

Unfortunately I don’t have experience reaching webflow support. I was hoping to get this resolved here in the forum. How do I go about reaching out to them? I’ll definitely update the post once I have an answer.

support@webflow.com
you can do that from WF
1.

1 Like

Perfect. Thanks for this @Stan :pray:

1 Like