Lottie animation is not playing on web in XD.

[Bambus_Björn]

Hi Folks,

 i latley discovered that you can use Lottie Animations in XD. Yeah! Awsome was my first thought but when  i tryied to share it with my Team-Member whos going to program the APP the exitment got less. 

As stated here(1) i am aware now that "Lottie will not be available in design specs." 
But why? Isnt the whole point of implemting animations in our UI`s and Prototypes to share with costumers and teammembers to show them how the UI is going to feel like? 

Any typs how to share your Prototype with others besides sitting down with them in an opened XD?
Whats your experiencees here?

Cheers
Björn

(1) https://helpx.adobe.com/xd/help/work-with-lottie-animations.html

<Title renamed by moderator>

[Joely]

Hi Björn

I've just tried to reproduce your «issue» and can't confirm this.

I placed a Lottie-File (json) on my XD artboard then exported an REVIEW and a DEVELOPER Link – and both worked perfectly inside Google Chrome.

PS: The feature came out oct 26 for Adobe MAX.

[Bambus_Björn]

Hey Joely

thats weird. I tried the same way and tried every Design Spec Option (Developer/User-Testing etc) and non of them play the acctual Animation from the Lottie JSON. Chromes aswell. You animation in played? 

Its weird because Adobe acctually states that Design Specs are not supported. What did they acctually release on ct 26? The Lottie feature itself or the possiblity to show lottie animations in your Design Spec? Can you provide a link here? I only found this and its japanese (1)

(1) https://www.adobe.com/max/2021/sessions/whats-new-in-adobe-xd-s912.html

[HARSHIKA_VERMA]

Hi Bambus_Björn, 

Thank you for reaching out. If I heard you right, you're unable to play lottie animation in your browser. I tried and I am unable to reproduce the issue. 
Please open this link: https://xd.adobe.com/view/02a58b4d-afa1-4e64-bc74-7927f6ca3c7b-57f6/ and see if this is working fine at your end. 

Please make sure you're not in design specs. 

Few more pointers-

• Lottie will not play automatically if a video is set to play automatically.
• Lottie will stop if other prototyping triggers are initiated.

"Lottie will not be available in design specs" means you won't be able to download the lottie file from design specs. 

Let us know if that helps. 

Thanks,

Harshika

[Bambus_Björn]

Hi Harshika,

As mentioned just a minute ago, i dabbled arouund a bit and found out that the animations work fine in the preview in the webbrowser. Its an issue with my costum animation i did in After Effects. Other animations from Lottie work just fine. 

This is the animation and the json is on the attachment but i guess i have to figure that out on my onw. ^^
https://xd.adobe.com/view/312d5a70-2b5a-4ddc-a88e-efb21916f763-647e/

and yeah. I was confused by the term of  "design specs" i though thats the name of the acctuall Prototype in the Webplayer,.. but you saw throu that and thanks for the info an that. 

Genrelly let me say this enhancment is a huge step forward for Adobe XD. Thanks for that! 
And your response. Even though the my problem still exists, you helped greatly.

Cheers

Björn

[Bambus_Björn]

Hey Again,

i just played around with it some more and read further into the topic and founds some updates.
First off all, my question regarding what was released on 26 oct,.. all fine i know what you meant.

Further more it seems its a problem of my custom animation i did in after effects. I tried a few animations from lottifiles and they work just fine, like videos aswell. 

Seems like the question now is, whats wrong with my json?  In XD i use the same settings like on the working animations. /shrug

thanks in advanced. 

[HARSHIKA_VERMA · Accepted solution]

Hi Bambus_Björn,

Thanks for sharing the lottie file which is not working. I assume you're experiencing the same issue mentioned here: https://community.adobe.com/t5/adobe-xd-discussions/lottie-animation-is-not-playing-on-web-in-xd-45-... which is because of the font used in the lottie.

I will get that checked from our engg team. I would suggest following Randy's advice of changing the font and then try again.

Let us know if that helps.

Thanks,

Harshika

[Bambus_Björn]

Geeez Harshika, 

I will check that out. 

thanks alot. You made my day today!:)

[HARSHIKA_VERMA]

You're welcome. I will keep you posted and let us know if it works after changing the font.

We'll try our best to help.

Thanks,

Harshika

[Bambus_Björn]

Yes. 

As mentioned in the referred threat, i converted the text-layers in AE to shape-layers manually and unclicked the "font to Shape Option" of bodymovin and that works great. Seems like Lottie just doesnt like Fonts. 🙂

Thanks again ^^

[HARSHIKA_VERMA]

Glad to hear you're able to resolve the issue with workaround and thanks for sharing what worked for you. This will help our other customer to fix the issue. 

Thanks,

Harshika

[romybianchi]

FYI for anyone still dealing with this, here are some things that need to happen for these to work:

• NO TEXT LAYERS at all in the projects. Convert to shapes and delete all original text layers
• Export as Json with Glyphs options unselected.
• Set to play automatically, make sure there are no videos set to autoplay in the same artboard.