I'm trying to load multiple lottie animation on my web app for mobile. I use angular 6 with ng-lottie. I have like 16 json files to load representing 16 lottie animations. On iOS, everything is really smooth, no probleme. However, on Android devices (tested on multiple devices: samsung galaxy S7, S9, asus Zenphone 6...), the animations takes from 3 to 5 seconds to load, making the entire page freezed during the loading. This means that the user can't interact with the page during this time, which is not ideal.
My setup
- angular 6
- ng-lottie 0.3.2
- the json files for animations weight from 100 to 200Ko and are stocked in the assets folder
Here is the way the lottie animations are displayed :
HTML :
<lottie-animation-view [options]="animation1"
[width]="scrWidth*0.9"
(animCreated)="handleAnimation($event,0,'animation1')">
</lottie-animation-view>
TS:
this.animation1_file=require('../../../../assets/anims/Question1-People/04.0-People-Fix-Father.json')
this.animation1 = {
animationData: this.animation1_file,
autoplay: true,
loop: true
};
What I've tried :
I tried replacing the animationData option by
path:'../../../../assets/anims/Question1-People/04.0-People-Fix-Father.json'
I tried to change the renderer of the animaiton (svg, canvas...).
I tried to set the progressiveLoad option to true.
None of theses tests make big differences on the loading times. I'm not sure if this is a problem with lottie or with the way that my json fimes are loaded.
