Safari animations problems in an angular app

[dkaimoti]

Hi,

I'm facing problems with lottie, angular and Safari.
I have an angular (angular 5) app with many components (routes). On each component there is a Lottie animation.
The initial route with animations works, slowly, but works. When i go to another route, the animation works but without the svgs, i can see the masks transitions of the animations, but it is like the SVGs can't be loaded.

It happens only on Safari. Chrome, firefox and even on the Internet Explorer works well.

Someone faced something like this?
Thanks in advance!

[bodymovin]

It might be related to the "base" tag that angular uses.
If you have it defined you should set the base path from where svg fragments will target each other.
when the library is loaded, call lottie.setLocationHref(path)
passing the base path.
Take a look at the discussion here.
#382

[dkaimoti]

Thanks! I understand the problem and solved using angular's HashLocationStrategy.

[simeyla]

Wow I spent ALL day on this.

Can you expand the explanation in the docs and samples. This is very important, and extremely hard to debug.

Also what's written above is confusing and implies you pass in your base path - which in my Angular app is actually "/" so initially people may think this doesn't even apply to them if they are using a subdirectory. Also not all developers may be familiar with what an animation mask/matte is - especially if they're just trying to incorporate a file someone else gave them - so including details about that would be valuable.

Anyway this fixed it for me for Angular 6 app:

ngOnInit() {
       const settings = {
           container: this.lavContainer.nativeElement
       };

       lottie.setLocationHref(document.location.href);
       this.anim = lottie.loadAnimation({...this.options, ...settings});
 }

Hate to see someone else waste as much time as I did - it's very puzzling what is happening until you know - and many opportunities to make a wrong assumption.

[dkaimoti]

@simeyla,

When we use HashLocationStrategy, a "#" will be added after your domain.
Ex: http://localhost:4200 will be http://localhost:4200/#/

The server will consider only http://localhost:4200, everthing after "#" will be ignored, so the lottie animation will always look for the SVGs considering the base url.

For use this, in your app.module.ts import and add to providers:

import { LocationStrategy, HashLocationStrategy } from '@angular/common'
...
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
...

More explanation:
https://angular.io/api/common/HashLocationStrategy

Hope it helps.

[Jokero]

This is very unexpected... SVG animation, angular, <base> tag, safari. It's crazy 😄
Using location.href helped.

[emmanuel-cbqa]

I have this in my component.html

<lottie-animation-view [options]="_options" ></lottie-animation-view>

this in my component.ts

public _options: Object;


  constructor() { 
    this._options = {
      path: '../../../../assets/images/xoat-animation.json',
      renderer: 'svg',
      autoplay: true,
      loop: true
  };
  }

Works fine in Chrome and Firefox but does not work for Safari.

[SobolevskyDmitry]

   lottie.setLocationHref(document.location.href);

@bodymovin Could add this hack to Lottie Web FAQ? :)