Jump to content

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

| ZachSaucier

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

Get an all-access pass to premium plugins, offers, and more!

Join the Club

User Feedback

Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now