GSAP initial loading problem

Design help Animations & Interactions
1

Hi guys,

Hope you are well,

I just completed my first GSAP tutorial which worked awesome,

the issue is that the components flash on the screen at the beginning of the animation before the gsap code kicks in,

Has anybody had this issue before?

Here is the URL:

https://fwd-gsap-showcase.webflow.io/

Many thanks,

Ed

Here is my public share link: LINK
(how to access public share link)

1 Like
2

Yea this is a problem which plagues basically everyone who starts using an external library. It’s called a “Flash of Unstyled Content”, it basically just means that there’s a couple milliseconds before gsap loads where your original styling is visible. So say you set gsap to animate something from 0 opacity, it’ll start at the value it is in the Webflow designer, go to 0 and then animate to 1.

There’s many ways to avoid it, but some good advice here

1 Like
3

Thanks @DavidFerguson

This is awesome thanks! It has been driving me nuts recently!

GSAP will take my websites to the next level!

Many thanks,

Ed

1 Like
4

@DavidFerguson That’s useful, but can you give some insight in how to achieve this from inside the Webflow Designer please?
Or anybody… this topic is quite widespread but nobody seems to be dealing with it from inside the new Designer GSAP UI, which is where a lot of the people are experiencing this problem.

Thank you greatly!

1 Like
5

Hi Frazer,

Best way to do it would be to grab the class that’s being animated and inside the head of the page add the following

.class-name{opacity:0;}

After doing that, it’ll be set to zero opacity before javascript loads, so you won’t see it until gsap animates it in

1 Like
6

Hi @Franciswebdev

Check this thread here: FOUC in the new GSAP UI in Designer - #5 by frazerphrase
We have a solution to this in testing that will require no user action when using GSAP within Webflow. If yopu’re using it externally, you’ll still need some solution.

If anyone is happy to share their read-only links, it would be great to have more sites to test.

Best,

Mark

1 Like
7

Just an update that Webflow now handles this automatically for you!

All animations that have a from animation setup, will now automatically be hidden until the GSAP module is ready to roll. We built this so it just works, you don’t need to toggle anything or figure out which element needs hiding, we take care of it all under the hood.

1 Like