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

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?
2021-02-19 00_11_04-Webflow - Boosted Stealth

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.

1 Like

@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?

1 Like

Hey Justin. Thanks for the kind words :smiley:

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.

1 Like

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. :smiley:

1 Like

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!
3 Likes

Good to hear that you found a solution! :smiley:

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.

3 Likes

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

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

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

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

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?

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

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 :smiley:

1 Like

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: Webflow - Make The Dot
(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 :slight_smile:

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 :smiley: