DEV Community

Using Lottie Animations inside Angular or Ionic 4

Sean Perkins on October 06, 2019

Getting Started We will need to install the required web components to render and play the Lottie animation. We will be using the player...

Read full post

Lordrauf • Aug 5 '20 • Edited

could this lottie-player using inside loading controller on Ionic 4/5?

i have trying but the animations doesn't play.

const loading = await this.loadingCtrl.create({
  spinner: null,
  translucent: true,
  backdropDismiss: false,
  message: `<lottie-player slot="end" autoplay loop src="https://assets3.lottiefiles.com/packages/lf20_uwR49r.json">
  </lottie-player>`
});
await loading.present();

Pavan C • May 1 '20 • Edited

Appreciate your write up. How do I make it work in my scenario below.
I already have import { defineCustomElements } from '@ionic/pwa-elements/loader'; statement in main.ts file.
How do i add import { defineCustomElements } from '@teamhive/lottie-player/loader'; in this case?
Could you please help? I'm using Ionic 5

Sean Perkins TeamHive • May 3 '20

With TypeScript, you can import a class/const/etc. with an alias, to avoid name collision.

For example, you could do this:

import { defineCustomElements as defineLottieCustomElements } from '@teamhive/lottie-player/loader';

defineLottieCustomElements(window);

You can name the variable whatever you'd like, with the as syntax.

J.D Nicholls • Nov 20 '19

Excellent, thanks for sharing mate! And also we can animate any html element using this other WebComponent => github.com/proyecto26/animatable-c...

Pra3t0r5 • Apr 23 '20

Thank you very much sir, you just solved my problem. I was not begin able to make it work correctly!
(Tested with NodeJS : v12.16.1 and @ionic/angular 5.0.5)

knee key • Nov 10 '20

how do you start the animation programmatically? like by pressing a button (not from the controls of the player)?