Skip to main content
Mike Flower
Mike Flower
Participant
November 4, 2021
Answered

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

  • November 4, 2021
  • 2 replies
  • 8190 views

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

    This topic has been closed for replies.
    Correct answer Spas K.

    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.

    2 replies

    R
    RazorX23837459yx7o
    Participant
    May 3, 2022

    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.

    Spas K.
    Community Expert
    Spas K.Community ExpertCorrect answer
    Community Expert
    November 4, 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 the desired effect.

     

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

      Mike Flower
      Mike FlowerAuthor
      Participant
      November 4, 2021

      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.
      Community Expert
      Spas K.Community Expert
      Community Expert
      November 4, 2021

      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.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices