Quick Tip: Removing a Flash of Unstyled Content (FOUC)

Have you ever noticed an annoying “flash of unstyled content” (FOUC) when a web page first loads? That happens because browsers render things as quickly as possible, often BEFORE your JavaScript executes the first time. So what if some of your ini…


This content originally appeared on Blog and was authored by Blog

Have you ever noticed an annoying "flash of unstyled content" (FOUC) when a web page first loads? That happens because browsers render things as quickly as possible, often BEFORE your JavaScript executes the first time. So what if some of your initial styles are set via JavaScript...like with GSAP?

Solution: apply visibility: hidden; to your elements in CSS and then use GSAP's autoAlpha property to show it (or animate it in) when the page loads. autoAlpha affects  opacity and visibility, changing it to visible when the opacity is greater than 0. Pretty convenient!

Check out this video from the "GSAP 3 Express" course by Snorkl.tv - one of the best ways to learn the basics of GSAP 3:

To make sure it works in browsers that don't have JavaScript enabled, you can undo the hiding inside of <noscript> tags.


This content originally appeared on Blog and was authored by Blog


Print Share Comment Cite Upload Translate Updates
APA

Blog | Sciencx (2019-12-16T22:58:00+00:00) Quick Tip: Removing a Flash of Unstyled Content (FOUC). Retrieved from https://www.scien.cx/2019/12/16/quick-tip-removing-a-flash-of-unstyled-content-fouc/

MLA
" » Quick Tip: Removing a Flash of Unstyled Content (FOUC)." Blog | Sciencx - Monday December 16, 2019, https://www.scien.cx/2019/12/16/quick-tip-removing-a-flash-of-unstyled-content-fouc/
HARVARD
Blog | Sciencx Monday December 16, 2019 » Quick Tip: Removing a Flash of Unstyled Content (FOUC)., viewed ,<https://www.scien.cx/2019/12/16/quick-tip-removing-a-flash-of-unstyled-content-fouc/>
VANCOUVER
Blog | Sciencx - » Quick Tip: Removing a Flash of Unstyled Content (FOUC). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2019/12/16/quick-tip-removing-a-flash-of-unstyled-content-fouc/
CHICAGO
" » Quick Tip: Removing a Flash of Unstyled Content (FOUC)." Blog | Sciencx - Accessed . https://www.scien.cx/2019/12/16/quick-tip-removing-a-flash-of-unstyled-content-fouc/
IEEE
" » Quick Tip: Removing a Flash of Unstyled Content (FOUC)." Blog | Sciencx [Online]. Available: https://www.scien.cx/2019/12/16/quick-tip-removing-a-flash-of-unstyled-content-fouc/. [Accessed: ]
rf:citation
» Quick Tip: Removing a Flash of Unstyled Content (FOUC) | Blog | Sciencx | https://www.scien.cx/2019/12/16/quick-tip-removing-a-flash-of-unstyled-content-fouc/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.