Animation flickering using fromTo (opacity / transform)

[benrbnt]

Hello all !

 

I reproduced a bug I found using fromTo (tested on chrome & safari on macOS). When using fromTo with an opacity (and a transform) and a stagger, I have a flickering issue. The codepen linked is supposed to reproduce the issue. But as it doesn't always happens, I recorded a video of it. I highly recommend to download it and to seek it / slowmo it to show what is happening. 

 

 

Thank you everyone ! 

See the Pen zYjMddM by nebrob_ (@nebrob_) on CodePen

[Rodrigo]

Hi @benrbnt,

 

Try adding will-change to your paragraph elements:

h1, p {
  will-change: transform;
}

This seems to work, at least in the example you provided.

 

Happy Tweening!

[Anastasiya33]

Hello,

I suggest trying this code (I added css and replaced opacity with autoAlpha)

[GreenSock]

If I understand you correctly, this has nothing to do with GSAP - it's simply due to the fact that the browser initially renders items in their native state and then it runs the JavaScript (GSAP) which sets the "from" state, thus there's a "flash of unstyled content", as described here: 

 

So @Anastasiya33 is correct (assuming I understood your question correctly)

[benrbnt]

8 minutes ago, GreenSock said:

If I understand you correctly, this has nothing to do with GSAP - it's simply due to the fact that the browser initially renders items in their native state and then it runs the JavaScript (GSAP) which sets the "from" state, thus there's a "flash of unstyled content", as described here: 

 

So @Anastasiya33 is correct (assuming I understood your question correctly)

I was thinking of that, but isn't the "from" with immediateRender supposed to be executed like a set ? or more likely a element.style.property = 'value'? Cause except if I'm wrong, GSAP doesn't wait for a RAF to set theses properties ? And as you can see in the video I sent, the paragrapgs are in opacity: 0; at first frame ? and then flicker to opacity: 1; to go back to opacity: 0; ?

 

EDIT: In the exemple I sent, it make sens that a FOUC happends.. But in my code, I create the animations on behind a loader. The loader only disappear after, but I still have this issue. It makes sense to me if the "from" is applied on a RAF, maybe you can confirm it ?

[GreenSock]

Yes, absolutely. GSAP is setting it IMMEDIATELY (when JavaScript runs). The problem is that the browser parses the HTML from top to bottom, displaying it and THEN it runs the JavaScript. There may be a tiny bit of time between when it renders the HTML and when it executes JavaScript. Again, it has nothing to do with GSAP or a bug. You could do the exact same thing by just putting this in your code: 

 

yourElement.style.opacity = "0";

 

And you'll notice that sometimes you'll see the element for a brief moment initially. 

 

The web page I linked to should explain all that as well as a workaround. 

[GreenSock]

By the way, I did discover a small bug that would explain the occasional flicker you described - it would only happen if the playhead landed exactly on top of where one of your staggered tweens started and it would last one tick. It should be resolved in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js (you may need to clear your cache). Better? 

 

In the meantime, you can set lazy: false on your tween(s). You could do it globally like gsap.defaults({ lazy: false });