Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

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


| GreenSock
9524

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.

  • Like 2
  • Thanks 1

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

Join the Club

We love seeing what you build with GSAP. Don't forget to let us know when you launch something cool.

- Team GreenSock


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

×