search

aarsteinmedia / dotlottie-player

Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player
GNU General Public License v2.0
16 stars 1 forks source link

Flicking on Firefox #4

Closed josheyr closed 7 months ago

josheyr commented 8 months ago

This is working very well so far, thanks for this awesome package. I'm getting a brief strobing of the animation upon first load and visibility change on Firefox. I've ensured "subframe" is enabled, tried renderer="canvas" and waiting for an animator to get back to me about extending each frame overlapping (maybe this is something possible to add as an option to potentially fix the issue?).

A demo of the issue is at https://tutorio.app/learn upon load it should start strobing after several seconds (when the new animation is loaded) on the notification modal.

Firefox version tested on 119.0.1 (64-bit) Windows Hope that info helps fix this issue.

johanaarstein commented 8 months ago

I'll look into it! 🕵️

johanaarstein commented 7 months ago

I think the problem here is that the animation isn't vectorized or even animated in the browser – it's just a sequence of bitmap images, much like a normal video file. Other than transparency you don't really get the upsides of playing the animation as a Lottie – it still weighs a lot, and apparently some browsers have issues with the playback. I think if you reworked the animation in After Effects to be shapes instead of still images it would look even better, work in any browser and on top weigh a fraction of what it weighs now.

BTW – there's a feature in this package that allows you to combine multiple animations in a single file, play them one after the other and control their individual playback. See https://github.com/aarsteinmedia/dotlottie-player#combine-animations

Good luck, and sorry I couldn't fix the issue! 😇

josheyr commented 7 months ago

All good, thanks for looking into it and the helpful advice!