How to make animation fill the mobile screen

[icewind7030]

The designer of out team create a lottie animation and exported to us with json data.

He create a html demo page which can preview the json data, but the animation render inside the screen not fill the whole screen, like this below:

I searched and found there is some preserveAspectRatio config to make svg renderer render the animation inside the screen. But the animation data the designer exported has some png and other data, which makes svg renderer not to work. So for now we can only use html renderer to make it work.

My problem is how to make html renderer animation fill the whole screen and cut off or overflow some parts(such as the top part) of the animation, if the screen ratio not satisfied with the animation radio.

Or is there any advice I can tell our designer to adjust his AE config to make the svg renderer work?

The online preview link is: html

[knenkne]

You better use svg or canvas renderer with correct preserveAspectRatio - tldr: xMidYMax slice should be good for u. And u've to fix the container size to 100vw & 100vh