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

[Mike Flower]

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

[Spas K. · Accepted solution]

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.

[Mike Flower]

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

Many thanks

Mike

[Spas K.]

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.

[Mike Flower]

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

[Ezequiel21828298xfjj]

Very helpful!! Thanks!!

Ezequiel

[RazorX23837459yx7o]

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.