Lottie animation in Ionic v1 project

Question

I am updating an existing project made with Ionic v1 in which I have to add a Lottie animation.

I found a similar thread on Github - https://github.com/yannbf/ionic-lottie/issues/1

I tried to add bodymovin script in my index.html, and calling the function from the controller but nothing happens. I don't receive any error so I am not sure what is wrong here.

This is the script I am using - https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.2/lottie.js

And here is the code I am using to call the lottie function

$scope.animData = {
  wrapper: angular.element(document.getElementById('lottie')),
  animType: 'html',
  loop: true,
  prerender: true,
  autoplay: true,
  path: 'js/data.json'
};
$scope.anim = bodymovin.loadAnimation($scope.animData);

Does anyone have a working solution or has an idea where I might be wrong.

I appreciate all the help!

score 0 · Accepted Answer · answered May 13 '19 at 10:19

I managed to solve it.

If anyone gets the same issue, the problem was that angular.element(document.getElementById('lottie')) returns an object.

The correct way to show lottie animation in ionic v1 is:

$scope.animData = {
    wrapper: angular.element(document.getElementById('lottie'))[0],
    animType: 'svg',
    loop: true,
    prerender: true,
    autoplay: true,
    path: 'js/data.json'
};
$scope.anim = bodymovin.loadAnimation($scope.animData);

Lottie animation in Ionic v1 project

1 Answers1