DEV Community

loading...
TeamHive

Using Lottie Animations inside Angular or Ionic 4

seanperkins profile image Sean Perkins ・2 min read

Getting Started

We will need to install the required web components to render and play the Lottie animation. We will be using the player maintained by our team at TeamHive. This package was ported from the original player to be built and compiled with StencilJS. This allows the player to be used in Webpack environments (i.e. Angular).

Install the web component:

npm install --save @teamhive/lottie-player

Register the web component in your main.ts.

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

defineCustomElements(window);

Note:

When dealing with web components in an Angular application, you need to apply the correct schema on the module containing the component/page.

schemas: [CUSTOM_ELEMENTS_SCHEMA]

LottieFiles

LottieFiles is a website of both free and premium lottie animations that you can easily adapt and use in your application or website.

LottieFiles Website

Find an animation that you like, select it and click the "html" output to find the JSON path. This path will be used in your application.

Note:

If you are using your application offline, you will need to download the JSON and reference it locally from your application.

Integrating Into Your App

Let's add a button to our view and embed the lottie-player component with our JSON we've selected from the previous step.

<ion-button fill="outline" expand="block">
    Example
    <lottie-player slot="end" autoplay loop src="https://assets3.lottiefiles.com/packages/lf20_ZWEJL5.json">
    </lottie-player>
</ion-button>

If we run this example we should see this:

Image

At this point you are up and running with an embedded lottie animation in your application.

Additional Styling

If in this example you want to style the animation at the end of the ion-button, you can apply this mark-up.

lottie-player {
    position: absolute;
    transform: translateX(40%) scale(0.75);
}

You can adjust the transform based on your animation's size and width of the button control. I would also recommend using a class or id selector for the styling.

Image

Discussion

pic
Editor guide
Collapse
hamzahalvanaa profile image
Lordrauf

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();
Enter fullscreen mode Exit fullscreen mode
Collapse
chilupa profile image
Pavan Chilukuri

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

Collapse
seanperkins profile image
Sean Perkins Author

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.

Collapse
jdnichollsc profile image
Juan David Nicholls Cardona

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

Collapse
pra3t0r5 profile image
Pra3t0r5

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)

Collapse
khurz10dom profile image
knee key

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