Best practices for autoAlpha + progressive enhancement?

___wtem___ · December 3, 2023

Hello forum folks

I use gsap's autoAlpha to avoid the flash of unstyled content, mostly on page load, but to truly earn the Good Boy™ badge I would like to make my pages visible even if js won't load. I know that some people are adding a class to the body with javascript in the head and use this class to attach css for js version of the page. I imagine that I could do in this scenario something like

.js {visibility: hidden;}

I have an intuition that may not always work for preventing fouc.

I couldn't find much on the topic, especially from recent years, so I wonder if that's a good way to do this, or are there other approaches?

mvaneijgen · December 4, 2023

I think if this is of much concern, use GASP to set gsap.set(yourElements, {autoAlpha: 0}) and don't hide elements that are above the fold. This way your animations only work of GSAP has already loaded and if you keep all your animations beneath the fold you don't see any FOUC, you probably don't even need to set the autoAlpha, because GSAP will calculate all the start values on executing the code, so if you have a .from() opacity: 0 it will hide it by its self.

I think you have to ask your self which of the two is the most important for every animation, FOUC or it showing if Javascript is not available, I don't think there is a silver bullet here. If you want the best of both worlds, don't animate things from an opacity of 0 above the fold and do this only for elements below the fold and use gsap.set() on these elements. Personally I'm of the opinion that important content should not be animated, so if JS doesn't execute the none important content will be hidden, so how bad will that be? Hope it helps and happy tweening!

Rodrigo · December 4, 2023

Hi,

The case you describe that the JS doesn't load seems very odd and unlikely to be honest, normally custom JS should be in the same domain/server, so if the HTML and styles load, why the custom shouldn't, so I assume that maybe the CDN links could fail.

If that's the case what I would recommend would be to create some inline styles in the head section to hide the elements that you want to prevent from showing. Then add the links to the CDN before the closing body tag and after those add a inline script that checks if GSAP was loaded, if not then use JS to remove the class:

<head>
  <style>
    .js {
      visibility: hidden;
    }
  </style>
</head>

<body>
  <!-- ALL YOUR HTML HERE -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js"></script>
  <script>
    if (typeof window.gsap === "undefined") {
      document.querySelector(".js").classList.toggle("js");
    }
  </script>
</body>

That's the best I can think in terms of preventing this failing because the CDN links are not available, which is not really common.

Hopefully this helps.

Happy Tweening!

___wtem___ · December 8, 2023

Thanks for your input guys! Maybe avoiding cdn failure and not the entire js failure is enough – I really like the idea of checking the window.gsap

Notifications

Messages

Best practices for autoAlpha + progressive enhancement?

Recommended Posts

_wtem_

Link to comment

Share on other sites

mvaneijgen

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

_wtem_

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members