FOUC when there are GSAP animations above the fold

How To
#1

Hello! :wave:

Is there any way of removing FOUC, when loading a page for the first time that has GSAP animations above the fold?

In the main hero, I have set up some animations that fire on page load.

However, when first visiting the site, you can see a very annoying FOUC with default font-family. Also, at the very first milliseconds you can see on the page all the animated items, then disappear and then re-enter with the expected GSAP animation :woman_facepalming:

Am I doing something wrong? How can I prevent those FOUC?

I have found this: Quick Tip: Removing a Flash of Unstyled Content (FOUC) - Learning Center - GreenSock, but I am not able to understand how I can implement this withing Bricksforge.

I have used Motion.page since its release for animations, and never experience this. Now I am switching to Bricksforge and this is my first time using it for animations, so maybe I am doing something wrong :confused:

Any help would be greatly appreciated! :slight_smile:

#2

Hey :slight_smile:

FOUC is something normal … we have it also when using plain GSAP code written in JavaScript. The solution from “Greensock” is easy to implement and will work well:

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!

So in short:

  1. For your elements you are animating, pre-add visibility: hidden via CSS or Bricks Controls
  2. In the Bricksforge Panel, add {autoAlpha: 1} for “to” animations or {autoAlpha: 0} for “from” animations.

That should do the trick :slight_smile:

2 Likes
#3

Thank you very much, Daniele!

This has worked perfectly :slight_smile:

1 Like
#5

autoalpha
autoalpha972×493 25.6 KB

#6

What if you change to a From To animation?

From: {autoAlpha: 0}
To: {autoAlpha: 1}

#7

autoalpha1
autoalpha1922×622 25.8 KB

Text is still invisible

The animations work except for the FOUC
After adding visibility: hidden to the element and autoalpha , it just stays hidden

#8

A little help Knut, how were you able to fix that, I’m doing the same(I think) but it still flashes

#9

Hey Naza!

For me it worked as Daniele said. I cannot get why it is not working for you!

Make sure you set visibility:none to the same element (#brxe-aszjca) that later you add the autoAlpha: 1.

In my case, I have this structure:

<div class="main-hero">
<div class="main-hero__container">
<h1>Main text</h1>
<p>Descriptions</p>
...
</div>
</div>

The h1 and the p have animations. And those items were the ones that caused FOUC. So I added visibility:hidden to the main-hero__container, and then autoAlpha:1 on TO in the same container.

Hope this helps you figure it out! :slight_smile:

2 Likes
#10

Yay! It worked. Thank you!
My mistake was adding the “visibility” and “autoAlpha” to the animating elements instead of the container.

#11

Just the right time for the solution - thx! :slight_smile:

Is this something that will be ‘included’ to BF some day? Very easy to set up - but the downside is that the elements are hidden in the builder - as well.

#12

Yep, I agree that it is annoying to have to change between visible/hidden every time I need to make a change to that section, so it becomes visible in the builder. I hope that Daniele finds a way to include this by default in BF for the above-the-fold elements, or something like this!

1 Like
#13

Hmm…I’ll think about it :slight_smile: I can’t do that across the board, because not every animation starts with Opacity: 0. So I would have to find out when exactly this is necessary. But I love challenges :wink:

3 Likes
#14

This would be awesome. Maybe do a check if we are in the builder and only add visibility none if we are on the frontend.

#15

With the next Bricksforge version, you can use a new helper class to handle fouc problems :pray:

3 Likes