Streaming live at 10am (PST)

Responsive full screen Lottie animation (keep Aspect Ratio)

Gah, sorry David, I had just set it to draft to publish an update live. Here you go: https://nautoinc.webflow.io/product/predictive-collision-alerts

I’ve been diagnosing it and I believe it was simply the rendering mode, once I set it to Canvas from SVG the flickering stopped.

Jon-circle-signature.jpg

2 Likes

This is awesome! Thank you so much!

1 Like

Worked for me, thanks a lot!

1 Like

This is a fantastic write-up & the code is spot-on: it worked perfectly!

These options should be included in Webflow by default: this is such a common use case.

3 Likes

Hello @Davidlin_ch12 ,

I implemented the code, it worked, but now it stopped working. Could you please inspect

And see why the lottie aspect ratio is changed each time the screen size is changed?

I have been trying to make it work for over an hour now.

Thanks!

Hey Jean-Paul,

Can you share your read-only link instead? I can’t access your site.

Hi @Davidlin_ch12,

Thanks for getting back to me. Appreciate the help!

Here is the read-only link: https://preview.webflow.com/preview/jps-cool-project?utm_medium=preview_link&utm_source=designer&utm_content=jps-cool-project&preview=4d3058293bdfd42d7042adda2f7df78d&pageId=5fdd2bcd63b242c36354ee07&mode=preview

Cheers,
JP

Hey Jean
It looks like you have added the custom code two times. Could you try to remove it from your project settings and only apply the custom code on a page basis? :slight_smile:

1 Like

Hey @Davidlin_ch12 , I could not find the duplicate code, but I deleted it out of the footer custom code section.

Not sure I have the code at all anymore implemented into the site.

1 Like


Here is what I am seeing on your staging site: https://jps-cool-project.webflow.io/

This usually means that the code has also been added to the project settings.

Please try deleting the code inside the footer code, then save the changes and publish.


Now go into each page with lottie animations and add the code inside of the pages custom code (see screenshot on original post) and publish again.

1 Like

@Davidlin_ch12 so I figured out the issue. It is set to canvas not SVG. Is there a way to make it work with canvas? As with SVG I get flickering on the scroll, with the canvas mode I do not.

Cheers,
JP

Hey JP,

It works with canvas and it is made specifically as a workaround to the way canvas normally behaves. Maybe there is something wrong with the implementation. If you can try from a clean sheet then maybe we can narrow down the issue. You can also try to add console.log("resizing"); inside of the addEventListener function. Then publish and check the console on the published site. If the message appears when resizing then it is probably working.

Hi @Davidlin_ch12,

Cleared all code. Inserted the new same code and added the new code you provided for eventlistener. In SVG it works perfectly but flickers on the actual site (not in preview though). Canvas does not resize properly and forces aspect ratio corrections.

I have noticed others in this thread with the same issue.

I even created a new page to test everything out. It is very specific to the CANVAS mode, which is what I need.

Not sure why this is not working… Again I appreciate your time and help. I would be more than willing to give you admin access to look, but not sure what else I can do at the moment. I am confident I have input everything correctly at this point.

Thanks,
JP

Hey @jpfaraj, I looked at your implementation. Please add the following code before the body tag in ALL your pages with lottie. (So both Home and Technology)

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

Your lottie settings look right and it looks like it is working in Home :smiley:

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