Как сделать полноэкранную анимацию лотереи на всех устройствах?

Question

У меня проблема с лотерейной анимацией контроллера мыши.

, поэтому я создал эту ручку, чтобы поиграть:)

https://codepen.io/duderion/pen/bGbXNqe

цель -что анимация лотереи идет сверху вниз в окне просмотра (за исключением верхнего меню), левая и правая части должны быть обрезаны (Вы не можете показать всю анимацию сразу, поэтому обрезка является естественным поведением)

Я думал(и я все еще думаю), что «xMidYMax slice» - правильный подход. Я думаю о нем как о «Максимизировать высоту и срезать влево и вправо» ...

Я пытался установить его в настройках средства визуализации bodymovin

 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"
  };

Но независимо от того, что я делаю, он не меняет свой формат, если я изменяю размер области просмотра.

анимация только в этом кадре, а не во всю высоту: (

Надеюсь, у кого-то здесь есть опытс такого рода проблемами и может дать мне подсказку.

Заранее спасибо

Адриан

Answer 1

После перевода кода в более простую версию для codepen я нашел решение.

вот этот код:

//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');
}