Animation Flicker on Page Load Using New GSAP Integration

Design help Animations & Interactions
1

Hi,

Using the new GSAP integration, I created a page load animation on my hero heading that changes its opacity. However, before the animation begins, the headline is briefly visible for about 1 second. How can I prevent this flicker and make the animation start smoothly?

I tried setting the heading’s opacity to 0 and also used visibility: hidden in CSS, but this caused the heading to be entirely hidden instead of just invisible before the animation.

Here is my public share link: https://mateoo-flow.webflow.io/

Best regards, Mateo

2

Hey @MateoFlow ,

The initial flicker on page load might be because the page might load faster than the animation. To avoid this, you could have a custom CSS or set the heading to be invisible by default and have the animation set its display & opacity property to be visible as per your design requirements. Hope this gives you some idea.

If you have done that and it still does not work, you could share a preview link of the site, to troubleshoot the issue.

3

It sounds like the flicker happens because the browser renders your heading before GSAP applies its starting values.
This is a common issue with animations on page load, and the fix is to make sure the element’s initial state is set before it ever paints to the screen — then let GSAP handle revealing it.

Here’s the approach:

1. Set an initial hidden state in CSS that still reserves space

css

.hero-heading { opacity: 0; visibility: hidden; /* Prevents interaction/focus */ }

2. In GSAP, use .set() before the animation to make it visible only when animating

js

gsap.set(".hero-heading", { visibility: "visible" }); gsap.from(".hero-heading", { opacity: 0, duration: 1, delay: 0.2, ease: "power2.out" });

Why this works:

  • The visibility: hidden in CSS ensures the text never flashes before the animation.

  • gsap.set() runs instantly (no animation) right before your .from() or .to() tween, ensuring the element becomes visible exactly when GSAP starts animating it.

  • This avoids the “hidden forever” problem you ran into, because visibility is toggled only at animation time.

Extra tip: If your flicker still happens, wrap your GSAP code in a window.onload or DOMContentLoaded event, so it runs only after the DOM and styles are ready:

js

window.addEventListener("DOMContentLoaded", () => { gsap.set(".hero-heading", { visibility: "visible" }); gsap.from(".hero-heading", { opacity: 0, duration: 1, ease: "power2.out" }); });

If you want, I can give you a no-flicker GSAP+CSS combo that guarantees a seamless hero load effect even on slow connections.

4

Thanks for your help! Here’s the preview link:

5

glad to know i helped, if you wanna get to know more about web develpoing, you can text