How can i make a lottie animation fullscreen on all devices?

Question

i have a problem with a mouse controller lottie animation.

therefore i created this pen, to fiddle around :)

the goal is, that the lottie animation goes from top to bottom of the viewport (minus the top menu), left and right should be cropped (You cant show the whole animation at once, so cropping is a natural behaviour)

I thought (and i still think) that "xMidYMax slice" is the right approach. I think of it as "Maximize the height, and slice left and right"...

i tried to set it in the bodymovin renderer settings

 var animData = {
    container: document.getElementById("sec"),
    renderer: "svg",
    prerender: true,
    loop: false,
    autoplay: false,
    offset: 500,
    rendererSettings: {
      progressiveLoad: false,
      preserveAspectRatio: "xMidYMax slice"
    },
    path:
      "https://uberserver.de/uncabka/wp-content/plugins/elementor-cabka/assets/js/animation.json"
  };

But no matter what i do, it doesnt change its format if i resize the viewport.

the animation is just within this frame, not full height :(

I hope, someone here has experience with this kind of problems and could give me a hint.

Thanks in advance

Adrian

Can you provide a minimal page with only the animation? Providing a link to your work in progress is good, but it is hard to see the problem. This might also help you to circumscribe the problem. Consider https://jsfiddle.net/ — cw', Oct 01 '19 at 17:10

score 1 · Accepted Answer · answered Oct 01 '19 at 20:19

After putting the code in an easier version to codepen, i found the solution.

it's this code:

//bind the complete function to the data_ready event of bodymovin's animation loader
anim.addEventListener("data_ready", complete);

//set the attribute manually after the svg is loaded.
function complete() {
   $('#sec svg').attr('preserveAspectRatio','xMidYMax slice');
}

How can i make a lottie animation fullscreen on all devices?

1 Answers1