Responsive full screen Lottie animation (keep Aspect Ratio)

[jpfaraj (Jean-Paul Faraj)]

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

[justinoliver77 (Justin Oliver)]

Love the site and thanks for the code snippet! One thing I can’t figure out is how you got that hero lottie file to look so good and only only be 6mb?

I’m struggling to get a 44 frame 900px by 900px export under 10mb without it looking terrible. What’s your workflow for lottie images, all done in bodymovin?

I’ve tried exporting jpegs through AE to super low quality and exporting bodymoving with original assets and that’s the best I’ve been able to do but still 12mb.

[itsroberthimselfyo]

@Davidlin_ch12 Thank you so much man! This solved the aspect ratio for me, but introduced a new problem. It seems like it’s center justifying the lotties, but I have hover over interactions that depend on a predictable position for the lotties. Is there any way to bottom-right justify the lottie while maintaining the aspect ratio?

[Davidlin_ch12 (David Xin Long Lin)]

Hey Justin. Thanks for the kind words

I am experiencing the same challenges as you are regarding getting the lottie files optimized as much as possible. My current workflow is to compress the frames in the bodymovin plugin

I normally try to compress between 40-60%. But even though I compress the same amount, the filesize sometimes will still differ significantly. I think the most effective solution is to work as efficiently as possible. Use as few keyframes as possible, maybe using tiny.jpg on the original assets, renaming the assets to the shortest names possible, and still compressing on export.

Please let me know is some of this helps with cutting the filesize down or if you have found any other methods.

[Davidlin_ch12 (David Xin Long Lin)]

Hey’o! Good to hear that it solved some of your challenges. Can you try this to see if it solves your new problem?

In the code I provided, we are using xMidYMid, which will force the scaling from the center position of the viewport. Maybe instead, try using xMaxYMin, which should be the bottom right corner of the viewport. If this does not work, I suggest you try brute forcing your way through all the values in the MDN doc here to see if one works.

[itsroberthimselfyo]

Thank you David. I ended up spending a bunch of time figuring this out and came up with a hybrid solution which uses part of yours, but in my opinion works much better than using the “PreserveAspectRatio”. (your method gave me responsiveness issues at extreme aspect rations, like if i resized the browser to be too thin or too thick

For anyone that’s curious, here’s how I did it:

1. Make a div block and set the width to 100VW
2. If you are using a 16:9 video, then set the height of the div block to - (100VW/16)*9 = 56.25VW
3. Put the lottie inside the dive, set it to canvas, make it absolute and full screen.
4. Then I pasted your code(below) before the tag and boom, works amazing!

[Davidlin_ch12 (David Xin Long Lin)]

Good to hear that you found a solution!

The solution you came up with will be perfect if you only need to keep the aspect ratio. But if you want to have the lottie animation fill the entire screen no matter what kind of viewport size, you would probably still have to use my solution. Your solution only resizes the lottie file if viewport width changes. I will add your solution as an edit, because I think both use cases are pretty common.

[EH2021]

Hi David,

Really appreciate your advice on this thread so far – I’ve still be struggling however to even get my lottie file to be animated behind the content in the first section (currently sits over the top) - it also doesn’t appear to be fitting to width / height of that section either - any advice?

https://preview.webflow.com/preview/ed-hallam-portfolio-2021?utm_medium=preview_link&utm_source=designer&utm_content=ed-hallam-portfolio-2021&preview=8a8c1c6cf09d66bebca7c8eb01afcc80&mode=preview

[Davidlin_ch12 (David Xin Long Lin)]

Hey Ed,

You would have to use position absolute and z-index to layer stuff on top of each other. You also need to place the animation inside of the parent section, so the browser can calculate the actual height that the animation needs to fill. Here is what I would do:

Add lottie into the section

Give Section position Relative

Give fixed animation wrapper position absolute, z-index 0, width 100%, height 100%

Give Lottie animation width 100%, height 100% and add the data-preserve-aspect-ratio code from my post – also change the render form to Canvas.

Give Grid 5 position relative and z-index 1

[EH2021]

wow, this is so helpful! thank you so much. It’s worked a treat!

[Mark_Bridgwater]

Hey guys,

All of this works well for the site I’ve been working on, until I add the custom code.

Basically I’m using full screen Lottie animations with a scroll animation to transition between the top 3 hero sections of this home page.

I have created a copy of the project with the page in question and have created a version of this page with and without the custom code.

With code / Without code

Without the code, everything works perfectly… until the viewport is resized, then the Lottie loses its proportions (most noticeable on the 2nd red section with circles).

With the code, all works well until the viewport is resized again. The Lottie keeps its proportions, but basically all of the functionality of my interactions gets broken and the page becomes really buggy and barely scrollable.

read-only link

Really hoping someone will be able to help here!
Cheers

[Omar_Elshiltawi]

Hey, thank you very much this always worked for me, but recently it stopped working.
It shows a black screen on desktop and the Lottie shows up only if i resize my screen, any ideas on how to fix it?

[Dave_Legion]

Top man @Davidlin_ch12 thanks for sharing.

I have another query regarding your file size reduction process - are you rendering out your still Fram sequence and compressing each still frame in AE > importing them back into a jpg sequence > then exporting to Lottie?

It seems to work well enough - just fishing as you may approach it another (quicker) way?

Cheers. D

[Davidlin_ch12 (David Xin Long Lin)]

Hey Dave,

Yes! That is also how I do it. I also try to use the built in compressor in Bodymovin. I haven’t found any quicker way, so if you do – please let me know

[Emilie_Ho]

Hi @Davidlin_ch12, I came across this thread when I was looking to optimize the lottie animations on my site (since they’re making me rank really low on SEO). The lottie animations that I’m trying to make responsive and render on canvas are not full screen - but nested under tabs.

I tried to implement the code and custom attribute from above, but it cuts off the animation like this:

Whereas I want it to behave like the svg render version:

Do you mind giving me a bit of advice on whether I should still use the custom code above? I’m not sure if it only applies to full screen animations.

Here’s my project link: https://preview.webflow.com/preview/makethedot?utm_medium=preview_link&utm_source=designer&utm_content=makethedot&preview=775815bb822ccf5c285224a765b3b096&workflow=preview
(I have reverted back to the SVG settings for now since this is a live site)

Thank you so much for any advice you may have

[Davidlin_ch12 (David Xin Long Lin)]

Hey Emilie,

Could you try using data-preserve-aspect-ratio: xMidYMid meet. This should make the inner viewport scale up, until it hits one of the borders. You could also try one of the different alignment values that you can see here

Hope this helps

[nicolaiH (Nicolai)]

Thanks so much for sharing this!

[michaelg1 (Michael Garvey)]

Hey @Davidlin_ch12,

Thanks so much for this-- it works for me. I just have one thing that I’m stumped on.

So, my Lottie file is in a container (technically, a div within a container) that takes up half the width of the screen. I want its height to be 100VH, and it is. The animation is landscape, so the width goes outside the container. However, the animation gets cut off on the sides, even though I’ve set the overflow for everything to visible (I even tried to add it in the custom CSS section to SVG elements with !important):

Here is my read-only link. If you go to the “Home2” page (where I’ve been testing stuff out), you can see my issue.

If you want to look at the live site, the pw is “unfinished”, and you’ll see the regular home page works the way I’d like it to, but it’s a bit janky and the responsiveness is off, so I’d prefer to do it the way I’m imagining under home2.

[LimeKnight (Pete Blatchford)]

Amazing discovery, thanks David!

[Sunny_Sally]

Thank you sooooo much. It really great.