Lottie SVG to Canvas Scaling + Layout Issues

[mpangst (Martin Angst)]

I’m not able to share my client’s site currently but the issue is rather straight forward.

When working with Lotties, the two available render modes scale differently.

SVG adheres to the original proportions of the Lottie and the layout settings in the designer.

Canvas, however, will awkwardly scale the Lottie and ignore the layout settings in the designer to make it unusable. It looks like additional padding is added to the original Lottie when switching to the Canvas rendering mode.

Why use Canvas? Well, SVG flickers with image-based Lotties.

Using custom DIV settings “data-preserve-aspect-ratio” does not work.

While different, a similar question was discussed in this thread:

Full Screen Lottie Transition

Hi there fellow webflowers! I am trying to implement a full page lottie animation to serve as a transition between loading pages… I rendered the animation from AE to json in 2560*1440 and it works as full screen when the viewport is in that type of aspect ratio however, if the viewport is different ratio, then the animation is scaled to preservice its aspect ratio… I have tried to use “object-fit:cover” but that did not succeed in achieving the desired result. I have found the following on Bo…

The goal is to get the same layout functionality for a Lottie using the Canvas render mode as when it is in SVG render mode.

Thank you,
Martin

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[theKVD (Kevin Handy)]

Try the code solution here: Responsive full screen Lottie animation (keep Aspect Ratio)

I just added it to mine and it worked. It’s still the data-preserve thing but with a different value and some JS.

My issue is still random padding on the sides that I’ve had to use negative margins and oversizing the lottie to fix but this fixed the mobile version what was super shrunk.

[mpangst (Martin Angst)]

Thank you, Kevin.

I worked this in with a Lottie. It looks like the result scales the Lottie to full page width and height and then crops/slices overflow beyond the parent DIV Block (Grid).

I realize I did not mention that the Lottie should scale correctly within it’s Div Block grid layout cell.

Any ideas on how the other solution could be adapted? I have been learning Webflow over the past month but am not able to write custom code, yet.

[mpangst (Martin Angst)]

I have reconstructed this issue in a separate Webflow project and updated the link in the initial post.

The problem persists and I hope someone has an idea how this can be fixed. Here are two screenshots illustrating the issue.

Now the main issue is the different scaling between SVG and Canvas render mode of the Lottie. My actual project seems to have more padding while this example shrinks in Canvas mode.

Here is an external thread with the same issue:

canvas render incorrectly but svg render works well

I have been stuck with this for days.
Thank you!

[Yansen (Yansen K)]

@mpangst

Now the main issue is the different scaling between SVG and Canvas render mode of the Lottie. My actual project seems to have more padding while this example shrinks in Canvas mode.

Hi Martin,
Did you manage to get a workaround for this issue? I’ve been stuck with this for days too.