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

[cheestudio 21 Likes (Newbie)]

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! 😭 

[OSUblake 18,365 Likes (Superhero)]

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.

 

[GreenSock 16,609 Likes (Superhero)]

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. 

[cheestudio 21 Likes (Newbie)]

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! 🙌🏻👌🏻