Lottie-web: Animation plays 100% in 'lottie files preview site' but renders differently on self hosted site

[garyjacobs]

I've managed to animate in AE (CC2018) and export the file using Bodymovin Plugin.
When I view it on the lottie files site under the preview section the animation plays a treat - like so:

https://www.lottiefiles.com/share/ZToAx4

When I load that same JSON into a self hosted version of the lottie.js Lib the animation plays but it's like the co-ordinants of all the elements have been warped like so:

and here is a link to the code:
https://bit.ly/2MN1XBk

My issue is with Chrome (desktop Mac High Sierra) I've tested on version 68 and higher and I get a weird render but as stated earlier when I load the same JSON into the lottiefiles preview all works as expected.

Any ideas?

[BillyTheGit]

Did you use the latest bm plugin and lottie player?

[garyjacobs]

Sure did. I copied the player lib from the Lottie preview files preview site. It all works on the preview site, just not my local hosted site.

[BillyTheGit]

I quickly checked your code and I don't think you defined the height and width for #motion3, this might be the problem.

[bodymovin]

@garyjacobs can you share the .aep?

[garyjacobs]

Here you go

https://www.dropbox.com/s/xiuoxjbsyyigsot/Dribbble%2008.aep?dl=0

[bodymovin]

The animation has been exported with version "5.1.18"
and the player is version "5.1.11"
can you try updating the player?

[garyjacobs]

I updated the library (I think) from the suggested download in the BM AE Extension.
Still no joy :(

http://garyjacobs.co/test/rewards.html

[BillyTheGit]

Your player is still 5.1.11
The one here: http://garyjacobs.co/test/assets/js/vendor/lottie.min.js
Latest player version is 5.2.1 download here: https://github.com/airbnb/lottie-web/releases/tag/v5.2.1
You might also want to update your extension.

[garyjacobs]

Okay... I exported with the bodymovin extension (v5.2.1) and I updated the player to v5.2.1 and it's still happening.
I uploaded the same Json file to the lottie preview site (which has a v 5.1.11 player) and it works (except for a weird purple gradient fill showing on the smile)

Here is the json (exported with extension 5.2.1) file rendering on the preview site.
https://www.lottiefiles.com/share/84Igvr

and it's still not working (chrome only) here:
http://garyjacobs.co/test/rewards.html

🤷‍♂️

[BillyTheGit]

If it works in at lottiefiles it probably has something to do with your code. I also tried it at a local server and works without a problem. Chrome also giving an error. So you might want to look at your code.

I'm not sure, but I don't think you can call the same var 3 times in your code

var animation =

Try giving them different names.

[garyjacobs]

@BillyTheGit Good call on the vars having the same name. I have renamed them now but it's still not showing correctly in chrome :(

http://garyjacobs.co/rewards.html

[bodymovin]

Two extra animations are trying to be loaded on two html tags that don't exist on the DOM:
'motion2' and 'motion1'.
Not sure if that might be affecting, but can you clean up the code so there's only one of the animations loading?

[garyjacobs]

Hi @bodymovin , thanks for getting back to me. I removed it and I'm still not having any luck - I really don't want to load up a png sequence or gif 😭any other ideas... is there a better way to include my code on the page perhaps instead of loading it in a separate file?

http://garyjacobs.co/rewards.html

[bodymovin]

I think the reason why it's not animating correctly is because you have a css selector applied to all the elements on your page "*" with the transition property set to all 0.275s ease;
This will make every property on every element on your page to interpolate with an easing.
Besides breaking the animation, this is not a good pattern,it will affect performance on your whole page in every interaction.
I'd check this file http://garyjacobs.co/assets/css/app.css and try to figure out where this comes from and remove it.

[garyjacobs]

YES!!!!! Hernan you have just made my day!
🙏🙏🙏