Initial state not working in Chrome — in Safari almost working

Community resources Bugs
1

Hi,
here is a screencast of the website I’m designing. Initial states are not working for Chrome, in Safari is almost working. In the video you can check how the content of the page is displayed for a fraction of a second before the loader appears. Your help will be very appreciated as this problem has been with me since interactions 2.0. Thank you!

https://www.useloom.com/share/d3d646eb47774979812f53f6869adb26

Preview link: https://preview.webflow.com/preview/sherpa-capital-theam?preview=509f0942c75c4978fc97e57da0bbf414

1 Like
2

Hi @mrmtta

Thanks so much for posting about this.

I’ve reported this to the team and we will look into this more to see if this is a bug or not. I was able to get the interaction to work correctly, so it may be that the Show Page animation was interfering with the the Start Loader animation.

To resolve this, you can edit the Start Loader animation. First, you can make each loader line a class based interaction, and then added two more animations to the end.

  • Loader screen opacity 100% → 0% over 0.6s
  • Loader screen Hide

19%20AM%20(1)
19%20AM%20(1)482×1206 58.5 KB

This workaround should get your animations working as expected for now while our team looks into this a bit more.

I’ll be sure to post back here with an update when I have one for you.

3

Hi @Brando, thank you very much for your response. Sorry for the delay saying thanks, I’ve been busy with some client work. I’m going to try what you describe and will let you know how it goes.

4

@Brando , I’ve been checking your answer and I think I might be not explaining myself quite well.

Being that Start Loader a looped animation, it doesn’t make sense for me to add those two steps at the end of it. I want the loader-lines to be animated as long as the page takes to load. Once the page is loaded, fade out the loader-screen to show the content beneath it. Hope it makes sense.

As well, I don’t how your solution can make the initial state to work properly as it stills take a fraction of a second for that loader-screen to change from display:none to display:flex when the page loads. Meaning that the content is seen before the loader shows.
I could set loader-screen to display:flex directly in the designer but this would mean turning it to display:none everytime I want to work on the project, as loader-screen is a fixed div on top of the actual content.

I don’t know if you can see in your Chrome browser the content of the page for a fraction of a second before the loader starts its animation.

Anyway, thank you very much for your effort and would be great if you could keep looking into this.

5

Hi @mrmtta

Thanks for responding here and that extra information helps explain the issue - thank you!

The steps I recommended above are definitely a workaround for the time being. Basically this will allow a preloader animation to still work for a predetermined amount of time. The only difference is the animation will stop after X amount of time regardless of if the page is loaded so this is definitely a workaround rather than a solution.

Regarding initial states - I couldn’t reproduce that in a new site. After testing more with your site, it looks like this issue is associated with your custom CSS:

17%20PM
17%20PM2526×1062 190 KB

Once I removed that the bit of custom code the preloader worked as expected.

I’ll share more details on the other issue soon.

7

Hi Brando,

thank you for your response again.

I removed the custom code. On chrome’s incognito mode, the initial state works as expected. I don’t know why in normal mode the content still appears for a fraction of a second before the loader starts its animation.

Anyway, I’m happy seeing that the initials state work at least in incognito mode.

1 Like
8

@mrmtta Can you try clearing your browser cache to see if that helps fix the initial state issue?

9

Hi @Brando, I’ve done that several times and doesn’t seem to work

10

Thanks for letting me know @mrmtta.

Our team is still looking into this one and I’ll be sure to let you know as soon as I have more information.

Thanks for your patience.

12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

13

Hey hey!

I was busting my head about this and a simple solution I found to work is just adding initial state as code, not just in interactions.

So, if your preloader has initial state set to display:block, you just need to add css to the project settings custom code head area.

<style>
 .element-class {
 display: block;
}
</style>

I hope this helps! :webflow_heart:

1 Like