Hey Webflowers!
In my quest to get a responsive full screen Lottie animation that keeps the right aspect ratio, I suddenly discovered this code: window.Webflow.require("lottie").lottie.resize();
The code resizes the Lottie viewbox to fit the parent container. By using this and data-preserve-aspect-ratio
, we should be able to make a full screen responsive Lottie Animation!
Step 1: MAKE LOTTIE CONTAINER FULLSCREEN
Add height: 100vh
and width: 100vw
to your Lottie container or a parent element. In my example I have a parent container that fills the screen and then I use 100%
in both height
and width
on my Lottie containers.
Step 2: ADD CUSTOM ATTRIBUTE
Awesome, your Lottie animation should now fill the whole viewport. Next go into your animation settings and add this custom attribute: data-preserve-aspect-ratio ="xMidYMid slice"
.
The animation should cover the whole container and preserve the aspect ratio just like with a SVG.
Step 3: ADD CUSTOM ON RESIZE CODE
Now we can add some custom code, to resize the inner Lottie animation, when the window resizes. Add the following to the before </body> tag
custom code section:
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
window.addEventListener('resize', function() {
window.Webflow.require("lottie").lottie.resize();
});
});
</script>
All your lottie animations should now resize accordingly.
Let me know if this worked for you
EDIT 1: ONLY KEEP ASPECT RATIO SOLUTION (COURTESY OF @itsroberthimselfyo)
LIVE LINK (Try to resize both live links to see the difference)
If you only need to keep the aspect ratio of the lottie file, do the following:
- Make a parent div block and set the
width: 100vw
- If you are using a 16:9 video, then set the height of the parent div block to - (100VW/16)*9 = 56.25, so
height: 56.25vw
. - Give your parent div block a
position
other thanstatic
. (differs between use cases) - Put the lottie inside the div block, set it to canvas, make it absolute and full screen.
- Add some custom code, to resize the inner Lottie animation, when the window resizes. Add the following to the
before </body> tag
custom code section:
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
window.addEventListener('resize', function() {
window.Webflow.require("lottie").lottie.resize();
});
});
</script>