Lottie + ScrollTrigger + Firefox

[iDVB]

First:
I think the docs around Lottie + ScrollerTrigger could/might use a refresh.

The LottieHelper appears to be written before the advent of useGSAP which would simplify things.

 

Primarily:
We have gotten things working perfectly in all but Firefox.

Firefox, sadly, continues to have that flicker problem described in the below two threads. 

In the below code example, you can see we are implementing things using the helper and in line with the below thread's recommended implementation. (we think) but this still does not work in FF. 

 

All other browsers and devices seem to work 100% but FF continues to flicker.

Even though we can see that all images have already loaded in the network panel; they still seem to flicker-in "the first time" in FF and then everything works 100% until refresh.

If we, toss the svg renderer in favor of the canvas one, then things work...
....but then the images load in a blocking way which we definitely do not want either.

 

Reproduction Example:  (load in Firefox)

https://codesandbox.io/p/devbox/pghzk3?file=%2Fsrc%2FApp.jsx%3A9%2C1

 

 

 

We wonder if something from scratch (no lottie file, no lottie-web) like the following would work better?

 

 

 

 

See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6 by osublake (@osublake) on CodePen

[Rodrigo]

Hi,

 

You're basically rendering a bunch of images inside an SVG tag using Lottie for that. I'm not an expert on Lottie but I think canvas would be a far better alternative than Lottie and you can plug that into ScrollTrigger as well:

See the Pen VwgevYW by GreenSock (@GreenSock) on CodePen

 

As for the issue, I see it on the latest firefox but the issue happens only in the first time you scroll down, if you go to the end, then scroll up and down again there is no flickering. This seems to me just like a first render type of issue which doesn't look like is related to GSAP. If I was you I'd use the canvas approach showed in the demo I linked above.

 

Happy Tweening!

[GreenSock]

Yeah, that definitely seems like a Firefox rendering bug, totally unrelated to GSAP. My guess is that the renderer needs time to create the raster image for each SVG image. It likely ignores them completely (skips creating the raster) initially because they are display: none. But once it flips to display: block once, that raster image gets created and cached by Firefox, thus it can show it faster next time. 

 

Maybe try setting ALL of the images to display: block initially, just for 1 tick maybe so that the browser gets them all rasterized/cached. Rodrigo's suggestion to go with canvas is very good too.