Lottie animations - how to make it stay on the last frame of the animation

Community Beginner ,
Nov 04, 2021 Nov 04, 2021

Copy link to clipboard

Copied

Hi

 

I have built a lottie animation and exported it out from AE using bodymovin. When I place the lottie in XD that all works fine. I have set the playback to be timed and not to loop. When I preview it, the animation plays correctly but at the end of the animation it does not hold on the last frame and it looks like it is going back to the start frame. The animation is some trimmed paths that start from nothing and animate on to reveal an illustration.

 

Is there anyway to hold on the last frame of animation. If I extend the comp in AE it hold on the last frame for the duration of the comp after the animation is finished but this seems an odd way to have a hold on the end of the animation which you are unable to make indefinte.

 

Thanks in advance

 

Mike

Views

2.2K

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 Community Professional , Nov 04, 2021 Nov 04, 2021
I don't think you can tell Xd to stop at the last frame right now. I haven't played with it too much, but doesn't seem like it. You can tell it to "Pause" at the end of playback, but it pauses at the first frame, so that's not really useful. You can put the animation inside a component with 2 states. On the second state you can have the last frame of your animation as a static image. Then you can set it up so that at the end of the playback it transitions to the second state, which achieves th...

Likes

Translate

Translate
Adobe Community Professional ,
Nov 04, 2021 Nov 04, 2021

Copy link to clipboard

Copied

I don't think you can tell Xd to stop at the last frame right now. I haven't played with it too much, but doesn't seem like it. You can tell it to "Pause" at the end of playback, but it pauses at the first frame, so that's not really useful.

 

You can put the animation inside a component with 2 states. On the second state you can have the last frame of your animation as a static image. Then you can set it up so that at the end of the playback it transitions to the second state, which achieves the desired effect.

 

Here's the prototype, and here's the file, so you can take a look.

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
Community Beginner ,
Nov 04, 2021 Nov 04, 2021

Copy link to clipboard

Copied

that's really helpful Spas K. Thanks for your assitance. It could be a handy feature to have in Adobe XD.

 

Many thanks

 

Mike

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 Community Professional ,
Nov 04, 2021 Nov 04, 2021

Copy link to clipboard

Copied

It's a must-have option in my opinion as well, as that's a very common use case. However, that's the initial implementation of the video and lottie feature, so I hope the dev team will flesh it out in upcoming releases.

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
Community Beginner ,
Nov 04, 2021 Nov 04, 2021

Copy link to clipboard

Copied

Got it working as per you example, Thanks for your great help.

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
New Here ,
Jun 17, 2022 Jun 17, 2022

Copy link to clipboard

Copied

LATEST

Very helpful!! Thanks!!

 

Ezequiel

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
New Here ,
May 03, 2022 May 03, 2022

Copy link to clipboard

Copied

You can achieve this in two ways:

 

1. Create a component with 2 states (as described by Spas K.) or switch to Prototype mode and change End of Playback to Type: Transition and change the Destiantion to another artboard that contains a still image of your last video or aniamtion frame. The last option makes setting up overlay controls easier in that seperate artboard.

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