Lottie Animation


#1

Hi Everyone,
So I am using lottie animations in my ionic 3 app and i would like to slow down the speed of the animation and set the direction.
Do you have any idea of how I could do it ?
Thanks for the answers.


#2

Use ng-lottie
check the documentation from ng-lottie
You can set animation speed with the following method :

setSpeed(speed: number) {
        this.animationSpeed = speed;
        this.anim.setSpeed(speed);
    }

#3

Hi @iamdevsaikat thanks for your answer.
I saw the documentation. So after putting the method in my ts file , how should I use it in my html view ?


#4

@adjacoumbasamb in html use lottie-animation-view

Example :

HTML :

<lottie-animation-view [options]="lottieConfig"></lottie-animation-view>

Component:

this.lottieConfig = {
  path: 'assetsnimationons/animation.json',
};

#5

@iamdevsaikat Yes i’ve done like that in my component :

image

and in my html view :

image

I think i’m missing something but I don’t know what it is.


#6

@adjacoumbasamb import LottieAnimationViewModule in module.ts
Use LottieAnimationViewModule instead of LottieAnimationViewModule.forRoot() in module.ts


#7

Okay done and for the speed function ? Am I using it in the right way ?