Jump to content
GreenSock

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

GSAP, "Flash of Content" and Accessibility/Screen Readers

Go to solution Solved by GreenSock,

Recommended Posts

Hi all,

 

Just a quick Q that I can't seem to find a good answer for:

 

I am using GSAP to animate some elements in, but on page load, there's a quick flash before GSAP hides the elements. I read that I can use "visibility:hidden" within my CSS to hide the element before the JS execution. This works great!....but also makes it so Screen Readers don't recognize this content. I've read mixed messaging on whether a screen reader would execute the JS and then crawl the content, but in general it seems the consensus is: "don't use visibility: hidden", in the event the screen reader doesn't execute JS.


But then...how else can I hide the element before page load and JS execution? I tried using just "opacity:0", which doesn't interfere with accessibility, but then GSAP's "autoAlpha" doesn't work! 😭 

Link to comment
Share on other sites

Hi cheestudio,

 

What's wrong with using just opacity? There can be performance gains with autoAlpha, but rarely enough for me to worry about, so I almost always use opacity.

 

  • Like 1
Link to comment
Share on other sites

  • Solution

Yeah, the main reasons to use autoAlpha are:

  1. If you want things to not be clickable when invisible. Like sometimes you may have "invisible" things sitting on top of elements that you want to be clickable, but if you only have opacity: 0 those elements can still obscure mouse clicks
  2. In extreme cases, it can help the browser do graphics rendering faster because it can totally ignore anything with visibility: hidden

But in your case, it sounds like there's no good reason to use autoAlpha so I'd just switch to opacity. 

Link to comment
Share on other sites

Welp, I completely misunderstood AutoAlpha and why to use it, so damn glad I asked this question. I will animate just the opacity property and then just declare that ahead of time via CSS to prevent the flash. 

 

Thanks guys, as always! 🙌🏻👌🏻

Link to comment
Share on other sites

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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×