On IX2 there is a “Set as initial state” toggle. I use it often to set on a heading the opacity to 0% on page load.
On IX3 I’m missing this and it’s causing that an element flashes on page load and then it animates.
Anyone else found a solution to prevent elements flashing on page load or a way to set “Set as initial state”?
Thanks!
Hey @Diego_Menchaca ,
You can probably set the opacity of the heading to 0, via the ‘From’ type animated property as follows:
You can explore what settings works for you, but having this with other animations does not flash the text on my end. Hope this gives you some idea.
@AJ_Dev thanks for replying but that didn’t fix it for me :(
Interestingly I noticed that this issue is only on the first page load, if I refresh the browser tab then it doesn’t flash on page load. But if I open the same page on another tab then I do see the initial flash.
Here I animated using IX3 the heading: https://rive-on-webflow.webflow.io/
Hello @Diego_Menchaca,
So if you are using the From To animation and don’t want your element to flicker on initial load then you will have to set the opacity of that element to 0 on the styles panel. The flicker happens because the page html loads faster than the animation, so if your element has an opacity of 1 it will show, then the animation will trigger and it will disappear, but it will not happen on subsequent loads as the animation will be already loaded, does that make sense? I hope this helps.
Hi @Pablo_Cortes understood. This is why the toggle “Set as initial state” was so handy on IX2.
Hopefully that toggle gets added also on IX3 
Hey @Diego_Menchaca, yeah the initial state on IX2 also had this problem, you have to match the initial state with the css for it to work without flickering, specially and most notably, on hero sections. GSAP has something built in to prevent this flickering, the AutoAlpha, that works by hiding elements with opacity 0 so that they are not visible on initial load. Maybe it is built in on IX3 too, I just haven’t seen it yet.
@Pablo_Cortes I see that AutoAlpha is indeed supported on IX3 but adding it doesn’t get rid of the flickering on initial load.
Here is an example of the flickering persisting even with AutoAlpha: https://rive-on-webflow.webflow.io/
I guess the only solution then is like you mentioned match the css with the initial state of the animation.
Hopefully in the future setting opacity 0% on “From” is enough to prevent any flickering on initial page load 
Initial state in IX2 often had the same problem. This is not bound to GSAP or IX3, but to JS styling/animating overall. Since it takes some time for the custom code to load, it displays the initial CSS state first; this is also the reason why it’s often only the first load, since after that the custom code has been cached.
The only solution is either applying the initial CSS in Webflow or applying custom CSS at the end of the .
@RoryVB I think applying initial CSS as custom code is a good workaround since I can still easily make text edits without touching opacity on Webflow.
Wondering if anyone has found an accesible solution to this (both for designers and users).
Setting the opacity to 0 for elements means if a user has JS disabled, elements will remain invisible. The only solution I can think of is to add some fallback styles in a <style> tag inside a <noscript> tag, however picking up all the elements via classes which I have animated will be a little long winded and manual.
Keen to hear if anyone has found a good way to do this yet!
Edit: Even following GSAP guidance to avoid FOUC (Flash of Unstyled Content), when setting visibility hidden to text elements which are animated with “Split text”, the whole text element never becomes visible, I assume because the element is set to hidden, but words are split into individual elements which have their own visibility set.
Webflow now handles the flash automatically.
