Lottie-web: Animation doesn't work with Safari

[sjcorn]

Bodymovin is seriously great. I'm building a set of animated banners in various dimensions. All work great in Chrome. About half of them work in Safari; and I just can't work out why.
htdocs.zip

[bodymovin]

I don't have a mac right now. I'll check it later.
do you see any errors in the console?

[sjcorn]

Awesome thanks. No, no errors that I can see.

[bodymovin]

I see it working fine on a mac over here.
do you have a link you can share?

[sjcorn]

Sorry, they're not online yet, just testing using localhost (MAMP).

[bodymovin]

I'm not sure what could be going on.
Have you tried the canvas renderer?

[sjcorn]

Sorry to be annoying, how do I use the canvas renderer? I'm not seeing it as an option.

[bodymovin]

on the index.html file you sent me, on line 41
change:
renderer: 'svg'
to
renderer: 'canvas'

[sjcorn]

Thanks, just tried it. Still not working for me.

[bodymovin]

I suppose it's related to using MAMP, I can't find a reason for it to fail.
Can you upload it somewhere temporarily to check it?
codepen for example?

[sjcorn]

Thanks for all your help, yeah I'm guessing it's related to MAMP. I'll upload and let you know. Thanks again.

[sifford]

Hey everyone, sorry for jacking this post, but I've been experimenting with bodymovin and how I could utilize it in my banner workflow. My usual flow is using gsap for banners, but since I'm more adept in animation than code, I thought bodymovin could allow more fancier banners and possibly be quicker for turnarounds. @sjcorn , though I wasn't able to test it out on safari, I was able to reduce the overall size of the file by eliminating the .json file by incorporating the code into the .html file and by swapping out the local player by linking to the bodymovin cdnjs. I would also assume that file using live text in the animation prior to converting would also reduce size instead of have multiple png files for the text. I would love to hear feedback on this and if this sort of thing is correct. Attached is @sjcorn 's banner I modified.
160x600.zip

[bodymovin]

@sifford Hi, there are many assets that could be vectors instead of pngs. The only three that need to be rasterized images would be img_16, img_17 and img_18 which could probably be lighter if they were jpgs instead of pngs since they don't seem to have any transparency.
Also regarding text, depending on the client specs, sometimes they don't take into account font loading as part of the filesize, specially if they're google fonts.
If not, you can let bodymovin convert glyphs to shapes and only the needed characters will get exported.