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 div with a fixed aspect ratio using padding-top (e.g., 56.25% for 16:9).
- Set the container to relative positioning and make the Lottie animation absolutely positioned (top/left 0, width/height 100%) to scale proportionally.
Yes, it is possible to preserve the aspect ratio when scaling a Lottie animation in canvas mode in Webflow, but it requires specific setup because canvas mode does not inherently maintain aspect ratio like SVG mode.
1. Understand the Difference Between SVG and Canvas Modes
- SVG mode uses vector scaling and automatically preserves the aspect ratio when resized.
- Canvas mode renders as pixels and fills the container, which can distort the animation if the container's aspect ratio doesn’t match the Lottie’s original aspect.
2. Use Object-Fit or Contain Strategy for Canvas Aspect Ratio
- Since canvas doesn’t support
object-fit, you need to wrap the Lottie canvas inside a container with a fixed aspect ratio. - Common method: use a padding-top (or bottom) trick to maintain aspect ratio.
Example:
- For 16:9 aspect ratio, set the container to:
- Width: 100%
- Padding-top: 56.25%
- Then use absolute positioning for the Lottie element inside it.
3. Steps to Implement Aspect Ratio in Webflow
- Add a Div Block: This will act as the Lottie container.
- Set Position to Relative: This allows absolute positioning within it.
- Add Padding-Top to Set Aspect Ratio:
- For 16:9, set Padding-Top: 56.25%.
- Place the Lottie Animation Inside: Drag it into the Div Block.
- Set Lottie Position to Absolute (Full):
- Position: Absolute
- Width: 100%
- Height: 100%
- Top/Left: 0
This setup forces the canvas to scale proportionally within a fixed aspect ratio space.
4. Optional: Use CSS to Control Scaling Further
- If needed, apply transform: scale() to the Lottie animation for finer control.
- Make sure the container is responsive for different screen sizes.
Summary
To preserve aspect ratio for a Lottie in canvas mode, wrap it inside a div with a fixed aspect ratio using padding-top and set the animation to fill the container absolutely. Unlike SVG, aspect ratio must be managed manually in canvas.
