Figma export to Lottie delay timing no longer working

Lottie in Figma
1

I have set delays between my frames using “after delay” and I also have smart animate with durations and they are all being ignored. It looks to be rendering it at one second per frame. This used to work. I checked an animation I made a few weeks ago and exporting it now is removing all the timing details.

I saw an alert that the plugin updated… perhaps that broke it.

2

Hi @Andrew5

Thank you for bringing this to our attention. Could you please share the Figma design file so we can investigate further? I’ll also check with our team to look into this on our end.

3

Sure, I put them in a special doc for you and added some notes on what I see in the generated lottie…

4

Hi @Andrew6! Thanks so much for attaching your file, it was super helpful. I might have found some answers for you, video also attached.

  1. Animations playing frame by frame ignoring delays and smart animate
    TLDR: If you want to use delays and animate durations, create a prototype flow and select the flow from the dropdown to render it.

To do this, simply:

  1. Select frame 1
  2. Go to the prototype panel in figma
  3. Click “Create flow starting point” and name your flow
  4. In the plugin, instead of clicking “export to lottie”, select your flow in the dropdown - your animation should now obey the delays and durations you set.
Full explanation

Your animations appear to be playing frame by frame, 1 frame per second, because you used the multi-select and export to lottie method, instead of using prototype flows. I noticed you hooked the frames up with prototype noodles, but hadn’t yet created a flow. In the video I attached, I showed the difference between the two methods.

If you use the multi-select and export to lottie method, the plugin will ignore the set delays and animation durations, because the plugin thinks you want it to animate the frames for you.

  1. In the Processing animation, it takes forever for frame 6 to go to frame 7

I took a look and saw that the smart animate duration between the two frames was set to 5500ms (5.5s) did you maybe intended it to only be 550ms?

Hope this helps!

Beatrice @ LottieFiles

5

That did it. I didn’t know the flow starting point was required. I was putting in extreme values for the delays to make sure the timing was being ignored. Thanks for your help.