Lottie-web: fill whole page

[sajidiftekhar]

Hi,

First of all, thanks a lot for this plugin and great job. But I have been running into a lot of difficulties due to the lack of documentation, which is understandable. I have been able to solve most of the problems.

I have been trying to fill the whole page with a 1920x1080 svg on top of everything else. My css code is something like

container{

width:100%;
height:100%;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
}

but for some reason, the svg is always showing in a 16:9 ratio and some part of the screen is empty;

It would really help me if you could tell me what I should be doing.

Thanks

[bodymovin]

Hi!
Have you tried changing the svg attribute preserveAspectRatio from meet to slice?
Would that work for your case?

[sajidiftekhar]

Thanks for the reply. Yes I have tried doing that. Just changing the perserveAspectRatio didn't work. However, I have found that changing the viewBox to '0 0 windowwidth windowheight' worked. But this caused the viewBox to stay in the same ratio even when the window is resized. So, I guess I'll have to dynamically change the viewBox everytime the window is resized.

Do you know any other way to do this ?

[bodymovin]

can you post an example of what you're looking for?
The viewbox and the width and height attributes usually should be the real size of the AE composition.
The preserveAspectRatio should take care of filling the ratio difference between the container and the original ratio.
If you set it to "slice xMidYMid" it will fill the remaining space and the exceeding part of the animation will disappear.
If you set it to "none" it will fill the whole space stretching or squashing the original animation.

[jamblo]

Hi there

Trying to follow this thread and setup my animation to "cover" the whole page.

` var animation = {

        wrapper: document.getElementById('anim_container'),
        animType: 'svg',
        loop: true,
        prerender: true,
        autoplay: false,
        animationData: circles

    };`

How do I do this? Where do I set preserveAspectRatio?

Thanks in advance!

[bodymovin]

Hi, there is not really an API to set this yet.
I'd suggest that you attach to the DOMLoaded event, and after it fires, set the preserveAspectRatio on the created svg element yourself.
If you use jquery, something like:
$('#anim_container svg').attr('preserveAspectRatio',value);

[jamblo]

Thanks, that worked... well, apart from DOMLoaded, which I couldn't get to fire at all.

I ended doing this as using attr was adding it all in lowercase, which meant the settings didn't apply:

$('#anim_container svg')[0].removeAttribute("preserveAspectRatio");

setTimeout(function(){              

            $('#anim_container svg')[0].setAttribute("preserveAspectRatio","xMaxYMax slice");

        },50);

[bodymovin]

Glad it worked.
How are you attaching to the DOMLoaded event?

[jamblo]

I'm not – DOMLoaded never worked for me.

I simply have it all in a window.load and the above function fires before anim.play(); runs a second later (wrapped in a setTimout()).

[bodymovin]

you can now override the preserveAspectRation by setting it in the rendererSettings