Streaming live at 10am (PST)

Lottie SVG to Canvas Scaling + Layout Issues

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:

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)

2 Likes

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.

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.

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:

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

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