Exported code issue - I suggest removing .w-mod-js from exported css file

Hello,


Issue: Content flashes once before fading in, this is only happening after exporting the code from Webflow.


I am using the ‘legacy interactions’ to made certain content fade in when the site loads or when the content scrolls into view. In order to do that, I have set an ‘initial state’ with opacity set to zero. That ‘initial state’ setting ends up adding something like this into the css file just before the first breakpoint:


html.w-mod-js [data-ix=“fade-in-on-load”] {
opacity: 0;
}


The issue is occurring because the html element does not include the class ‘w-mod-js’ until webflow.js adds it. So this css does not initially get used, hence the flashing of content before fading in. Is there a reason it needs to include the .w-mod-js portion in the css? I’m able to fix the issue by removing that portion like this:


html [data-ix=“fade-in-on-load”] {
opacity: 0;
}


Is there any way to have that removed by default? I’m trying to make my company’s workflow as streamlined as possible, so having to edit this out of every export isn’t ideal. Maybe this needs to be posted elsewhere, any advice would be appreciated.


Thanks!

  • Tyler Griffin
  • Oct 5 2023