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
- Export the Lottie JSON with the correct aspect ratio in After Effects and avoid scaling it disproportionately in Webflow.
- Place the Lottie animation inside a div container with a padding-top trick to maintain the aspect ratio, then set the Lottie to absolute with 100% width and height.
- Canvas-based Lottie animations need container-based methods for aspect ratio since canvas doesn’t maintain it by default.
- Optionally, use custom CSS or code to control sizing, as canvas won't respond to preserveAspectRatio settings directly.
Yes, it’s possible to preserve the aspect ratio of a Lottie animation in canvas mode in Webflow, but it requires specific setup both in the JSON export and Webflow embed settings, since canvas animations don’t inherently preserve aspect ratios like SVGs do.
1. Set Proper Dimensions in Lottie Export
- When exporting your Lottie JSON from After Effects using Bodymovin, ensure you use a composition with the intended aspect ratio (like 16:9 or 1:1).
- Do not scale up the animation in Webflow to a different aspect ratio unless it stretches uniformly.
2. Use Container Controls in Webflow
- Place the Lottie animation inside a container div block.
- Set the container's width and height using relative units (e.g., VH/VW, or % with padding-top trick) to maintain proportion.
- Example: For a 16:9 Lottie, set container:
- Width: 100%
- Padding-top: 56.25% (which is 9/16 × 100%)
- Then set the Lottie element to absolute positioning inside the container, with width and height set to 100%.
3. Choose Canvas or SVG in Webflow
- Webflow uses canvas or SVG rendering mode based on how the JSON is structured.
- Some custom JSON animations force canvas mode (especially image sequences).
- If your Lottie uses a sequence of raster images, it will default to canvas mode, and you'll need the container-based aspect ratio approach.
4. Maintain Aspect Ratio Responsively
- Use Webflow CMS or interactions to dynamically control visibility or scaling only if needed, but don’t manually resize the Lottie in the Style panel unless within an aspect-ratio-maintaining container.
5. Optional: Use Custom Code for Precision
If you're embedding with custom code (Lottie Web player):
- Use the preserveAspectRatio setting inside the container with CSS, since the Lottie canvas itself won’t respond to it directly.
- Make sure to set canvas sizing via CSS, not script.
Summary
While Lottie canvas mode doesn’t inherently preserve aspect ratio, you can simulate this behavior by placing the element inside a properly styled container. This container keeps the desired ratio, and setting the Lottie element to cover or stretch within it ensures the animation scales proportionally across devices.