title: How can i make a lottie animation fullscreen on all devices?
body: <p>i have a problem with a mouse controller lottie animation.</p>
  
  <p>therefore i created this pen, to fiddle around :)</p>
  
  <p><a href="https://codepen.io/duderion/pen/bGbXNqe" rel="nofollow noreferrer">https://codepen.io/duderion/pen/bGbXNqe</a></p>
  
  <p>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)</p>
  
  <p>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"...</p>
  
  <p>i tried to set it in the bodymovin renderer settings</p>
  
  <pre><code> 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"
    };
  </code></pre>
  
  <p>But no matter what i do, it doesnt change its format if i resize the viewport.</p>
  
  <p><a href="https://i.stack.imgur.com/cqIrw.png" rel="nofollow noreferrer">the animation is just within this frame, not full height :(</a></p>
  
  <p>I hope, someone here has experience with this kind of problems and could give me a hint.</p>
  
  <p>Thanks in advance</p>
  
  <p>Adrian</p>