Fancy Image Flip Book Not Working on Firefox

[InTheOne]

On Firefox my fancy cat walk does not work at all on my website: https://phpstack-74099-1024495.cloudwaysapps.com/

On Codepen it works jankely.

 

How can I get this sweetness working on Firefox?

See the Pen dyPVdjr by jonroc (@jonroc) on CodePen.

[elegantseagulls]

Hi @InTheOne,

 

Browsers don't like it when you change the source of an image, as it has to check/repaint the entire image, which is likely the cause of issue in FF. To eliminate this, I would load all your images to the dom and use your tween display/hide them with opacity/visibility (autoAlpha), or better, yet, stitch the images together as a sprite sheet, and tween between them via transform, using a stepped ease, (hardware accelerated) in an overflow hidden div (similar to this example:

See the Pen MBWqYX by elegantseagulls (@elegantseagulls) on CodePen.

).

[InTheOne]

That is great! I'm including my new Pen in case anyone else wants to do a simpler version of the airplane CSS sprite. 

See the Pen BayYKYM by jonroc (@jonroc) on CodePen.