Is it possible to preserve the aspect ratio when scaling a Lottie image sequence in canvas mode in Webflow, similar to how it is achieved in SVG?
TL;DR
- Wrap the Lottie canvas in a relatively positioned container div with a set padding-top to maintain aspect ratio, and set the Lottie element to absolute positioning with 100% width and height.
- For full control or better aspect ratio handling, use custom code with lottie-web or switch to SVG mode.
You’re trying to preserve the aspect ratio of a Lottie animation using image sequence in canvas mode in Webflow, similar to SVG behavior.
1. Understand the Limitation of Canvas Mode
- Lottie canvas mode differs from SVG because canvas does not inherently support automatic aspect ratio preservation.
- When rendered as canvas, Lottie directly paints pixels based on the dimensions provided in the container and canvasing logic, which usually results in stretching if the container’s aspect ratio changes.
2. Workaround with Container Styling
- Wrap your Lottie animation in a container div with a fixed aspect ratio using padding-top trick (e.g., 56.25% for 16:9 or 75% for 4:3).
- Set the canvas to 100% width and height of the container and use absolute positioning.
- Steps:
- Create a Wrapper Div and give it a class (e.g.,
lottie-wrapper). - Set the wrapper’s position to relative.
- Apply padding-top to maintain aspect ratio (e.g., 56.25% for 16:9).
- Inside it, place your Lottie element and set it to position: absolute; top: 0; left: 0; width: 100%; height: 100%.
3. Use “PreserveAspectRatio” Equivalent via JavaScript (not native in Webflow)
- Webflow does not expose a direct setting for preserving aspect ratio in Lottie canvas.
- If you're embedding Lottie via custom code (e.g., using
lottie-webJSON), you can manage scaling manually by adjusting the canvas size and draw dimensions dynamically using aspect calculations. - In Webflow, this usually requires custom code in an Embed block, meaning it’s not achievable through the native Lottie element block alone.
4. Use SVG Mode If Aspect Ratio Is Vital
- If maintaining the original aspect ratio is essential and you do not need performance boosts from canvas:
- Re-upload your animation and select SVG mode in Webflow’s Lottie element settings.
- SVG rendering preserves aspect ratios more reliably across screen sizes.
Summary
Webflow’s Lottie canvas mode does not automatically preserve aspect ratio, unlike SVG mode. To simulate it, wrap the canvas in a container with a fixed aspect ratio (using padding-top) and use absolute positioning. For precise control, consider using custom code or switching to SVG rendering mode.