Search the Community
Showing results for tags 'unstyled'.
Found 1 result
-
Quick Tip: Removing a Flash of Unstyled Content (FOUC)
ZachSaucier posted a blog post in Learning Center
When a web page loads, it tries to display the content as soon as possible. Usually it does this by loading the elements into the DOM and styling them with your CSS and then rendering. But what if some of your initial styles are set with JavaScript, particularly a JavaScript animation? We can fix this flash of unstyled content (FOUC) visual bug by applying visibility: hidden; to our elements and then use GSAP's autoAlpha property to animate in our content once JavaScript has detected that the page has loaded. autoAlpha affects our element's opacity and visibility, changing it to visible when the opacity is greater than 0. To understand this more deeply, 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. Watch the video