Lottie animation is not playing on web in XD.

Explorer ,
Dec 08, 2021 Dec 08, 2021

Copy link to clipboard

Copied

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>

 

TOPICS
Product performance

Views

1.1K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Employee , Dec 08, 2021 Dec 08, 2021
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-version-on-win10-machine/m-p/12514317#M57334 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, Har...

Likes

Translate

Translate
Adobe Community Professional ,
Dec 08, 2021 Dec 08, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 08, 2021 Dec 08, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Dec 08, 2021 Dec 08, 2021

Copy link to clipboard

Copied

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. 

 

HARSHIKA_VERMA_0-1638984260458.png

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 08, 2021 Dec 08, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 08, 2021 Dec 08, 2021

Copy link to clipboard

Copied

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. 



Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Dec 08, 2021 Dec 08, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 08, 2021 Dec 08, 2021

Copy link to clipboard

Copied

Geeez Harshika, 

I will check that out. 

thanks alot. You made my day today!:)


Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Dec 08, 2021 Dec 08, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 08, 2021 Dec 08, 2021

Copy link to clipboard

Copied

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 ^^


Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Dec 08, 2021 Dec 08, 2021

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines