A couple of people have been posting about the FOUC (Flash of unwanted content) in their Webflow projects after using the new GSAP features.
I understand that it is the elements being loaded before JS is initiated, however nobody has shown how to solve this issue easily from within the Designer…
Although I have come up with a fix (using the old Webflow animations to change the opacity of the class ‘.initial_opacity_zero’ that I add onto the parent of the element I wish to use the new GSAP animations on) it’s using the old animations and for the sake of future-proofing and just general good practise it would be good to see how others do it using the new GSAP system.
Sorry for kicking a dead horse but there’s not been a good tutorial at all from anyone so hopefully this will help kickstart this.
Literally trying to find resources and fixes to this right now myself. You can find multiple YT tutorials of people building “award winning” page load animations, but all of them have FOUC on the staging site/live site, which basically renders them useless for real client projects.
Honestly, I’m really disappointed by how Webflow released the new GSAP interactions. The fact that there is no official fix is sad. I don’t want to implement a workaround for this, because then I can just go back to manually code custom GSAP and insert my code in the page settings (which btw has been the best solution so far that causes me the least headache)… Until they haven’t fixed this or provided an official, feasible workaround, the page load trigger is basically a shiny, useless feature .
We have a fix in testing for FOUC, and it will automatically fix all of it for you, so soon™ you shouldn’t have to do anything.
TLDR; it was a real pain to figure out, given the visual aspect of Webflow, it had to be handled very differently to how a developer would typically solve it, as typically gsap animations were built mostly using to, but the visual side of webflow means more people use from inside the designer (because why wouldn’t you, you want to see the design on the canvas), and it’s those animations that are causing the flash.
We’re now automatically handling the initial appearance of targeted elements that have a from animation set on them, and making sure they don’t display until js module has loaded.
I’ll be happy to add you to the BETA, if you’d like to duplicate your site and give me the site name DM me your site name and registered webflow email address so you can test it out, or email mark at webflow dot com with that info.
thanks for the swift response! I have already worked around the issue for my current project, so I have no need this time. Looking forward to see the fix live for my future projects :)!
Thank you for this - I’m in the same position, and have wasted enough time on it already! So yes, look forward to seeing it implemented automatically soon!
I know that soon™ is relative to testing and all sorts of issues, AND I am about to go live on a website that I would rather not go in and fix the FOUC on all the GSAP that I have included…
Basically I am asking in if soon™ in this case is estimated in days, weeks or months.
@DLimageworks if you want to send me your Webflow email or site name, I can add that specific site to the beta. If you do that, I’d suggest cloning the site if possible and use that site on staging to test it out. As for actual release, it will be when we feel it’s robust enough. It can take time finding edge cases in all the various setups.
As a temporary fix, you can hide your elements (set opacity to 0) on page load using Classic interactions. Then, animate everything else using new, GSAP-based ones. If the element needs to be visible before starting to animate, set the opacity to 100% with a short duration at the start of your GSAP timeline.
Ofc, it adds a bit of JS to the site but at least there’s no FOUC.
Hi all! We just shipped an automatic fix for this. It will be rolled out to all users by end of week if you’re not seeing it in your dashboard yet. Appreciate your patience
We need a way to opt certain elements out of this. It’s currently breaking all page loader animations because the site shows up for a second and then your page loader appears. Kind of surprised webflow rolled this out to everyone without testing or giving users any way to opt out.
I found a solution, I just had to disable the “from” column. in the GSAP animation editor. Since I’m setting my initial styles with CSS this works fine. Thanks for the quick response.
That was going to be my suggestion, but didn’t want to jump the gun!
Yeah, all from and fromTo will be hidden, to is the answer. Glad you’re unblocked, this was honestly a big decision we went back and forth on… “to toggle or not to toggle"
We tested a lot and honestly couldn’t find a use case where opt out would be necessary, but I can still be wrong!
.
