Flash of content when using ScrollTrigger

[marius96]

I'm trying to create a landing page which uses parallax, but for some reason there is a flash of unstyled content when I scroll.

I looked over the documentation and it's being suggested to use anticipatePin: 1, but that doesn't fix it in my scenario.

See the Pen ExKYbgq by make96 (@make96) on CodePen

[ZachSaucier]

Hey marius96. Does the same flash happen on the CodePen version for you? If not, do you have anything else going on on your actual page?

 

Side note: You could write your JS more efficiently by using data attributes and GSAP's defaults:

See the Pen OJNLOqE?editors=1010 by GreenSock (@GreenSock) on CodePen

[marius96]

@ZachSaucier

Thank you for tightening up my code!

 

Yes, the same flash occurs in the CodePen.

I don't have anything else on my page.

I thought my problem was caused because I was using big *.png files, but I coverted all my images to the *.webp format, but I didn't see any changes.

[ZachSaucier]

Can you try it on different devices? I'm not seeing any flash here.

[marius96]

@ZachSaucier

Yes, I tried it on my iPhone, and everything is working as it's supposed to.

Edit:

I tried it on the desktop version of Chrome, and it seems to be fine.

Looks like Microsoft Edge based on Chromium is the culprit.

The performance on Firefox is pretty bad, do you have any tips on how can I improve that? Or do I need to manually mess up with the scrolling behavior in the config of the browser? 

[PointC]

Windows: Chrome, Edge, FF - all looked fine to me. No flash at all.

[ZachSaucier]

Looks fine to me in Edge as well. 

 

The performance in Firefox seems fine to me. You could add will-change: transform to the elements being translated.

[marius96]

I did a few little experiments, so I could narrow the problem.

Testing this on my laptop ( it has a pretty weak config ) and a 1080p screen, everything is going smoothly, even Firefox's performance ( that flash is still present in Edge ).

I added will-change: transform and rotation:0.01 , but it didn't improve the performance in Firefox. ( very choppy scrolling and animations on my main computer, which has an i5 - 6600k ).

So, I decided to open the task manager and the results are suprising:

• scrolling in Edge or Chrome on my main computer gets the CPU usage up to 2-3%;
• scrolling in Firefox on my main computer gets the CPU usage up to 15%.
• CPU usage on my laptop always higher on Chrome, making the results are inconclusive.

 

[Visual-Q]

I don't see the flashing however:

 

I looked at the image assets you were using all the images appear to be the same size at 2540 * 1319 yet the  active image area for each  generally takes up only a small part of the image frame with a huge area of transparency. With 11 images layered over top of one another the browser is calculating an enormous number of transparent pixels unnecessarily for render.

 

While I get how this makes it easier to create and lay-out the assets if the images were cropped to surround only the active image area the browser would likely have a greatly reduced workload rendering this.  More work getting everything positioned just so but it might pay off performance wise.