FOUC and Webflow Editor issue

[eugenesochODR]

Hey everyone, 

 

I have a little problem - I really wanted to get rid of FOUC and used method, where the entire page-wrapper initially is set to hidden, but then GSAP nicely animates it and it works well on published Webflow website. BUT!

It all comes down crashing in editor mode, because GSAP code is not being executed, meaning the editor is being used with .page-wrapper class visibility set to hidden.

 

Did anyone have a similar problem and if yes, how did you overcome it?

 

Thanks in advance!

 

Code pen attached.

 

See the Pen VwomQrX by Eugene-Soch (@Eugene-Soch) on CodePen.

[mvaneijgen]

Is there or can you add a class to the page when it is publish? I don't use Webflow, but I would figure they have something for that? Or check if there is some element on the page that is only visible when you're in edit mode. Otherwise I would ask them, this is not really a GSAP issue or at least there is nothing the GSAP code can do to fix the Webflow editor. 

[eugenesochODR]

6 minutes ago, mvaneijgen said:

Is there or can you add a class to the page when it is publish? I don't use Webflow, but I would figure they have something for that? Or check if there is some element on the page that is only visible when you're in edit mode. Otherwise I would ask them, this is not really a GSAP issue or at least there is nothing the GSAP code can do to fix the Webflow editor. 

I don't  think I have explicitly explained the problem. 

 

Here it is to make a bit more sense:

 

Say, by default, every element is visible on Webflow - like every single one. 
If I add GSAP and create a timeline, if every element is visible, there will be short splash of unstyled elements - check this code pen:

 

See the Pen zYgoWEa by Eugene-Soch (@Eugene-Soch) on CodePen.

 

Now to remedy this, tutorial recommends applying css to element of my choosing - in this instance, I selecte page-wrapper, as it hides all unnecessary info, and once GSAP animates it, it becomes visible. 

Now the problem is in Webflow Editor - it pulls the CSS which hides the element, which is required for the GSAP to prevent the FOUC.
I guess if you don't work with Webflow, then probably you won't know the solution.

 

I tried using code in the head of the page, but it's not working. 

 

Will have to dig more in order to find the solution!

Many thanks for the reply anyway!

[Rodrigo]

Hi,

 

In order to avoid the FOUC issue you have to set visibility hidden in your styles and not in the JS part of your project. JS will always be executed after the DOM initial render thus causing the FOUC problem, but if you add your styles in the head section of your HTML then the elements will be hidden and then you can create your GSAP instances. The only thing you have to be careful with is to not use from instances, since those take the element from the value you're passing to the from instance to the current property value the element has based on it's initial styles, so if you have visibility: hidden and then use autoAlpha: 0 in a from instance GSAP will take the element from opacity 0 to opacity 0, so is better to use a regular to() instance. Something like this:

 

CSS

.my-element {
  oapcity: 0;
  visibility: hidden;
}

JS

gsap.to(".my-element", {
  autoAlpha: 1,
});

If you're not animating opacity then after creating the GSAP instances that affect the element set the autoAlpha to 1:

gsap.to(".my-element", {
  x: 200,
  rotation: 360,
});

gsap.set(".my-element", { autoAlpha: 1, });

Hopefully this clear things up.

Happy Tweening!

[Rodrigo]

Sorry I forgot about the link on our Learning Center:

https://gsap.com/resources/fouc

[eugenesochODR]

4 minutes ago, Rodrigo said:

Sorry I forgot about the link on our Learning Center:

https://gsap.com/resources/fouc

This is exactly the same tutorial I used to implement this solution.

 

Here is my code:

 

CSS (in the head of the project)

.page-wrapper {

visibility: hidden;

}

 

JS (in the body of the project)

let homeTL = gsap.timeline({

defaults: { opacity: 0, ease: "back" },

});

 

function init() {

homeTL

.from(".page-wrapper", { ease: "linear", duration: 0.75, autoAlpha: 0 })

.from(".welcome-text", { yPercent: 50 })

.from(".decorative-underline", { scale: 0, duration: 3 }, "-=0.25")

.from(

"h1 span",

{ yPercent: 150, stagger: 0.25, duration: 1, ease: "back.out(1)" },

"<+=0.25>"

)

//.from("#special-offers", { yPercent: 25 }, "-=1.5")

.from(

".slide-content",

{ scale: 0.8, stagger: 0.25, duration: 0.75 },

"-=1"

)

.from(".button-temp", { yPercent: 100 });

}

 

window.addEventListener("load", function (event) {

init();

});

 

The problem only occours in the Editor (it doesn't load the scripts in the body tag), but loads the scripts in the head tag, CSS.

 

Production is  not affected, as everything is loaded as it should be, Designer is also unaffected, as CSS snipped and JS are loaded on a production site.

[Rodrigo]

Ahh yeah, that is related to the way the editor works and not a GSAP/browser related problem though. I'm afraid that this is something for the folks in Webflow to tackle since is beyond our grasp I'm afraid.

 

But the fact that you're able to check and confirm that everything works in production is a good sign though 👍

 

Sorry we can't be of more assistance 😞

[eugenesochODR]

1 minute ago, Rodrigo said:

Ahh yeah, that is related to the way the editor works and not a GSAP/browser related problem though. I'm afraid that this is something for the folks in Webflow to tackle since is beyond our grasp I'm afraid.

 

But the fact that you're able to check and confirm that everything works in production is a good sign though 👍

 

Sorry we can't be of more assistance 😞

Gents, don't be sorry! Your support is exceptional and I honestly don't expect you to know every answer! By posting here I thought I could get an answer from someone with Webflow background too!  
But once again, both Mitchel and you are extremely helpful, so THANK YOU for that! 

[eugenesochODR]

Ha! Here is the solution!

 

With a bit of trying and testing, this CSS helps with the problem!

 

So now I have all 3 scenarions covered:

 

• External JS & CSS doesn't work on Designer, allowing me to edit.
• Custom CSS prevents .page-wrapper to be hidden when in Editor Mode
• And everything works as expected in Production! 
   

WIN WIN WIN! 😃

 

 

/* Hide page-wrapper initially */
.page-wrapper {
  visibility: hidden;
}

/* Ensure the page-wrapper is visible in Webflow Editor */
.w-editor .page-wrapper,
body.is-editor .page-wrapper {
  visibility: visible;
}

Correction - had to update the above - it wouldn't work on production site. 

[Cassie]

Additional note that noScript tags are important here too. 👀
 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript

<noscript>
  .page-wrapper {
  	opacity: 1;
  	visibility: visible;
  }
</noscript>

 

 

[eugenesochODR]

10 minutes ago, Cassie said:

Additional note that noScript tags are important here too. 👀
 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript

<noscript>
  .page-wrapper {
  	opacity: 1;
  	visibility: visible;
  }
</noscript>

 

 

Right, what is this then about? Not a trick question by the way!

[Cassie]

Quote

The <noscript> HTML element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.

 

It's a fallback incase the user doesn't have JS, otherwise your just hiding the whole webpage from them.

[eugenesochODR]

On 10/10/2024 at 4:27 PM, Cassie said:

 

It's a fallback incase the user doesn't have JS, otherwise your just hiding the whole webpage from them.

Hey @Cassie, thanks for this - sorry again for seems like a stupid question, but which part of the code should I wrap in noscript tag?
Is it the whole CSS rule, or not? And in what scenario (speaking of Webflow), this could be causing an issue? 
 

Thank you!

[Cassie]

Exactly the code I gave you above - it goes in the head of your site and runs IF the user doesn't have JS

 

This isn't webflow specific. Just  some extra security incase your site gets served to a user who doesn't have JS enabled, it's an edge case but when you're hiding the entire webpage with CSS and then revealing it with JS, it's good to have a backup incase the JS step doesn't happen 🙃

 

https://www.kryogenix.org/code/browser/everyonehasjs.html

[Rodrigo]

Hi,

 

You should add the noscript tag after your custom JS ideally, something like this:

<script src="my-file.js"></script>
<noscript>
  <style>
    .page-wrapper {
      opacity: 1;
      visibility: visible;
    }
  </style>
</noscript>

Happy Tweening!

[Cassie]

^ Rodrigo might be right on location actually 👀

Not sure of the difference between head vs after custom.js.

Worth checking!

[eugenesochODR]

17 hours ago, Cassie said:

^ Rodrigo might be right on location actually 👀

Not sure of the difference between head vs after custom.js.

Worth checking!

Ha! OMG - this thread is just like a gift that keeps on giving! 
Firstly, thank you for a clarification - the whole idea of adding a noscript with a bit more context made a World of difference to me!
Especially the part explaining why it should be there in the first place! Guess what - it does make a big difference! I have added it to head and it made a big difference, when inspecting the site with JS disabled! OMG!

Besides, my GSAP code was in body, so it worked with noscript living in a head, and the script file placed in body.

 

In any way - wow, thank you all @Cassie, @Rodrigo & @mvaneijgen - super happy! 😃

[C42D]

On 10/10/2024 at 10:31 AM, eugenesochODR said:

Ha! Here is the solution!

 

With a bit of trying and testing, this CSS helps with the problem!

 

So now I have all 3 scenarions covered:

 

• External JS & CSS doesn't work on Designer, allowing me to edit.
• Custom CSS prevents .page-wrapper to be hidden when in Editor Mode
• And everything works as expected in Production! 
   

WIN WIN WIN! 😃

 

 

/* Hide page-wrapper initially */
.page-wrapper {
  visibility: hidden;
}

/* Ensure the page-wrapper is visible in Webflow Editor */
.w-editor .page-wrapper,
body.is-editor .page-wrapper {
  visibility: visible;
}

Correction - had to update the above - it wouldn't work on production site. 

does this still work for you? I tried adding this css to my global styles, it hides page-wrapper but I can't see it in the editor. not sure if webflow has changed some of the class names or something (though I do see w-editor in the inspector). 

[julp]

Hey there, first post!
after many attempts to avoid the FOUC and get around the inexplicable webflow behaviors (visibility: 'forever' hidden) ^^' that prevented 'autoAlpha' from working...

Context: 
First real webflow project, and first use of GSAP
While trying to follow the GSAP guide to avoid FOUC on the home page hero, I manually modified the CSS visibility of a staggered animated element (fed by the CMS). This element remained hidden despite a .from + autoAlpha: 0... never worked, still doesn't. My actions seem to have altered the CSS somewhere, I've read here and there that there are caching problems... it's beyond me.

My solution:
Create an interaction in webflow 'after page load' in which you can define the opacity of the containers whose elements will be animated.
For this to work properly, I defined a delay that allows me to synchronize the staggered appearance of my various elements. 

The result is perfect, but it's still a designer's DIY and I guess there are much more professional ways of doing this.

[C42D]

I have a solution that seems to be working in the current Webflow environment. Should be self-explanatory if you can read CSS and JS. This prevents FOUC but displays the content in the designer/editor/builder modes. replace

".hero-component" with your class.

 

<style>
/* Hide section_hero initially to prevent FOUC */
.hero_component {
  opacity: 0;
}

/* Show in Webflow Editor */
html.w-editor .hero_component {
  opacity: 1 !important;
}
</style>

<script>
// Show in Webflow Designer "Build" mode
if (window.location.href.includes('webflow.com/design') || window.location.href.includes('webflow.io')) {
  document.querySelectorAll('.hero_component').forEach(el => el.style.opacity = '1');
}
</script>