DEV Community

TeamHive profile image Sean Perkins
Sean Perkins for TeamHive

Posted on

Using Lottie Animations inside Angular or Ionic 4

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
Enter fullscreen mode Exit fullscreen mode

Register the web component in your main.ts.



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

defineCustomElements(window);
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (6)

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

Collapse
 
seanperkins profile image
Sean Perkins •

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
J.D Nicholls •

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)?

Read next

congcong profile image

GBASE数据库 | Introduction to GBase 8a MPP Cluster Data Loading and Performance Tuning

Cong Li -

congcong profile image

GBASE数据库 | Introduction to GBase 8a MPP Cluster Data Loading and Performance Tuning

Cong Li -

getvm profile image

Free Algorithms Learning Resources: A Comprehensive Guide for Aspiring Developers

GetVM -

neonmice2 profile image

Teknik Menunjuk Permainan Judi Online Berdasarkan Ketentuan Main

Malik McQueen -