Animation isn't triggered in Editor

[simonlind]

I’ve added a fullscreen loader that’s being removed when the page is done loading. This works fine when you a user visits the page, but when you’re an editor on the page the inline styles that have been applied from the animation suddenly disappears when the Editor is done loading. That means my loader is now blocking the content that my editors need to access. I’ve made a screen recording showing the problem here: webflow-bug

Explanation
00:00 – 00:05: Shows correct behavior for normal users in a incognito window
00:05 – 00:22: Shows how it behaves with the Editor. The page first loads as it’s supposed to (shows loading overlay, removes it with an on page load animation by setting display: none as an inline style on the loading overlay.
00:23: When the editor is done loading it removes the added inline styles and defaults back to display: flex on the loading overlay.

My temporary fix
What I’ve done to fix this for my editors temporarily is add some custom JS that removes the loader from the DOM after a few seconds. This works, but it’s creating a glitch effect in the Editor and it is a hack for something that shouldn’t be happening.

Link: https://www.eduflow.co/landing

[rileyrichter (Ben Parker)]

Hi, @simonlind!

Thanks so much for posting about the issues you’re seeing with the loading animation and the Editor.

I made a quick video to show you how to fix this issue:

Hope this helps! Also, I’m going to remove this from the bug category since this doesn’t qualify as a bug! Have a great day!

[simonlind]

Hi @rileyrichter, thank you for the video! This is such an awesome way of doing support.

The problem with your proposed solution is that the JS triggering the animation setting the inline CSS on the loader element is triggered after the HTML elements in the DOM has started to load. That means when a user goes to the site for the first time the HTML starts to get loaded in, JS loads and adds display: flex to the loader element and then the animation runs to remove it. That’s why I have display: flex as the default value for the loader element. Here’s a video showing how it looks the first time a user visits the page: webflow-issue

[rileyrichter (Ben Parker)]

Hi, @simonlind! I’m so glad that I could help!

That’s a great catch!

Can you try adding this code in the Head Box on the Custom Code tab of your site’s settings:

<style>
html { opacity: 0; transition: opacity 0s ease-out; }
html.webflow-loaded { opacity: 1; }
</style>
<script>
var Webflow = Webflow || [];
Webflow.push(function() { $('html').addClass('webflow-loaded') });
</script>

This should solve the issue for your first time visitors. See this video:

If this doesn’t fix it for you, just reach back out!

[simonlind]

Hi @rileyrichter, thanks for giving it a try! It doesn’t solve the problem though: webflow-issue-2

I guess I’ll have to live with my current implementation until it’s possible to keep the animation state inside the Editor :).