Streaming live at 10am (PST)

Lottie Animation render Problems

Hey community,
I’m having some issues with my current webflow project.
I have a grid with contains 6 different Lotti Animation (Picture sequences). All of them are different in height. I wrapped them in divs and put them into the grid.
So far so good.
But the Lottie rendering (SVG) causes a flickering of the animation while page loading. (I think because the JSON just contains JPG sequences).
Rendering the Lottie animation in canvas should fix this issue, but screw up all sizes for some reason.

My Question:
Is there any way I could remove the flickering of the Lottie animation in SVG rendering?
or
Is there any way I could restore the normal sizing of the Lottie animation in Canvas rendering?

Best regards

Hi Gabor

Regarding flickering, this could happen to you if you use the action “Lottie Playback” + Loop, to solve it instead of “Lottie playback” you must use the action “Start an animation” and you must configure 3 actions:

-Lottie animation (timing: set as initial state) / 0 %
-Lottie animation (duration: "here you put the duration of the animation) / 99%
-Lottie animation (duration: 0 s) / 0 %

Finally you select the option Loop.

Here you can see a video with the configuration:

(I got this solution from Alex Dram: https://forum.webflow.com/u/dram)

For the second question you could solve it if you set the size for each image in the Style section. By setting the width and height in pixels it doesn’t matter if you render with SVG or Canvas, the image size will remain the same.

Here is a video with the settings:

I hope this helps you.

Oswaldo

1 Like