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…
@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?
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.
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.
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:
Make a div block and set the width to 100VW
If you are using a 16:9 video, then set the height of the div block to - (100VW/16)*9 = 56.25VW
Put the lottie inside the dive, set it to canvas, make it absolute and full screen.
Then I pasted your code(below) before the tag and boom, works amazing!
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.
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?
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:
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.
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?
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:
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
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.