First you need to install the npm
packages lottie-web and ngx-lottie.
Register the needed stuff in the app.config.ts
file:
import { provideCacheableAnimationLoader, provideLottieOptions }
from 'ngx-lottie';
import player
from 'lottie-web';
export const appConfig: ApplicationConfig = {
providers: [
provideLottieOptions({ player: () => player }),
provideCacheableAnimationLoader(),
//
]
};
Use the ng-lottie
tag in your html
files:
<ng-lottie
[options]="options"
width="500px"
height="500px"
(animationCreated)="animationCreated($event)" />
Open the corresponding TypeScript
file and adjust the code accordingly. First we need to add LottieComponent
to the imports
array in the Component
decorator.
@Component({
//
imports: [LottieComponent],
//
})
Add a reference to the AnimationItem
and we define our AnimationOptions
. These options contain the settings for the animation like the path or the setting if the animation should be played automatically or in a loop. Finally we add the animationCreated
method to get access to the AnimationItem
.
private animationItem: AnimationItem | undefined;
options: AnimationOptions = {
path: '/assets/animations/globe.json',
loop: true,
autoplay: false
};
animationCreated(animationItem: AnimationItem): void {
this.animationItem = animationItem;
}
Use this.animationItem
to start, pause or stop the animation accordingly. In my sample code, I'm using three buttons to control the animation.
If you run your Angular project, you will see the starting position of the animation, in my case a blue globe and the three buttons.
The following GIF will show the website and also the animation in action.
If you are more interested into details, please see the following medium.com post: