▼
Streaming live at 10am (PST)

Responsive full screen Lottie animation (keep Aspect Ratio)

Hey David,

First off I am beyond grateful for your continued support.

I am totally and utterly lost as to why this is happening. I have all setting entered correctly (as per what you indicated) added the new code (per your instructions).

However, when you change to a different viewport (other than desktop) the aspect ratio gets screwed up still. When you go to the tablet view it does not cover the whole viewport, in mobile it covers the viewport but the aspect ratio is off.

I am typically comfortable implementing code, however, Lottie is new to me…

HOME PAGE

My Settings:
Canvas
data-preserve-aspect-ratio
xMidYMid slice

Code:

    var Webflow = Webflow || [];
    Webflow.push(function() {
    window.addEventListener('resize', function() {
    console.log("resizing");
    window.Webflow.require("lottie").lottie.resize();
    });
    });
    </script>

Styling:
Lottie Div I have: Flex, Horizontal, 100vw, 100vh, Fixed Positioning

Lottie Itself: Block, 100vw, 100% height, Relative Positioning


Thank you,
JP