For my first Webflow website, I decided to add Lottie Animations, and I’m so glad I did.
What I loved: I was impressed by the user-friendliness of the interface for adding Lottie Animations, looping Lottie animations, and changing their time durations.
Major frustration: I ran into the issue that the Lottie files I created and exported using Bodymovin and LottieFiles from Adobe After Effects included a blank last frame. This meant that looping was not seamless, and the animation became blank after playing.
Blank final Lottie frame fix
Two solutions worked for me. Depending on the Lottie Animation file and how I used the timeline, one or the other solution was a more straightforward fix.
Fix 1: Remove the extra blank last frame in Lottie Animations exported from Adobe Effects with Frame Rate
The issue might be that your Adobe After Effects Composition frame rate is set to something other than 30 or 60fps. Changing your frame rate to 30fps or 60fps and reexporting using Bodmovin fixes the issue.
A Webflow forum post from 2020 confirms the frame rate fix for Lottie animations playback in Webflow.
How do you change the FPS of your composition in After Effects?
Right-click on your Composition Panel’s name and select Composition Settings. In the field for Frame Rate, type 30 or 60 and then the button, OK.
Fix 2: Remove the extra blank last frame in Lottie Animations exported from Adobe Effects by changing the code
For this fix, open your JSON file in the text editor of your choice. Search for “op:”
OP is the end-frame. Change the number to be one number less. For instance, if you have 118, change it 117.
A “Lottie get rid of last frame” Webflow forum post from 2020 confirms this fix.
