Lottie-web: Animation as Background image

[iqasim-com]

Hi i am using Bodymovin for animation, i want to use After effect generated animation for my Container
as a background image. So my question is, i can use these animation for background and how ?

For example :
background-image: ;

[bodymovin]

Hi, unfortunately, no, css background images don't support javascript based animations.

[iqasim-com]

Thanks for quick response i have another query.
So how can i manage multiple animation in my index file each animation would have a separate json and html file ?
For Example:
if i want to use animation in each section of my website like below:

<div class="section"> animation </div>
<div class="section"> animation </div>
<div class="section"> animation </div>
<div class="section"> animation </div>

Note All animation would be different in each section
So in this case how can i manage all animation in one json file and javascript file which include in html file.

Or can you please send me some examples related to this

[ArthurianX]

@mqasim1990 - you could set a div like this:

• html - <div class="lottie anim"></div>

• css

.lottie-anim {
z-index: 1; // lowest in your page
position: absolute; // or static, depending on what you have
width: 100%;
height: 100%;
pointer-events: none;
}

Like this you could set it as a 'background' image.

[bodymovin]

@mqasim1990 if you need multiple animations, you should use only one instance of the js player and a separate json file per animation.
Then you can load them by calling lottie.loadAnimation, once per animation

[ArthurianX]

@bodymovin - this applies to displaying multiple animations one after each other in the same container, but doing it from the API, correct ?

I couldn't find anything in the documentation, but can we load multiple animations in the same container and play more at once, or jumping through segments from different ones.

It's not a real use-case, I'm just trying to figure out the best way to do something.

[bodymovin]

@ArthurianX Each loadAnimation call will return an instance of an animation which you can control independently.
You can load them in the same container or load them in different containers.

[iqasim-com]

Thank you so much Hernan.

On Fri, 13 Jul. 2018, 17:05 hernan, [e-mail] wrote:

@ArthurianX https://github.com/ArthurianX Each loadAnimation call will
return an instance of an animation which you can control independently.
You can load them in the same container or load them in different
containers.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/lottie-web/issues/1139#issuecomment-404813917,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWM-m9GOWUl6VzuYh8JDrgjoxQnhEVH8ks5uGI0dgaJpZM4VI5EE
.

[ArthurianX]

Thanks @bodymovin!

[Jvalal]

@mqasim1990 - you could set a div like this:

• html - <div class="lottie anim"></div>
• css

.lottie-anim {
z-index: 1; // lowest in your page
position: absolute; // or static, depending on what you have
width: 100%;
height: 100%;
pointer-events: none;
}

Like this you could set it as a 'background' image.

Where are you referencing the lottie .json here?

[sebastianmurillonader]

@mqasim1990 - you could set a div like this:

• html - <div class="lottie anim"></div>
• css

.lottie-anim {
z-index: 1; // lowest in your page
position: absolute; // or static, depending on what you have
width: 100%;
height: 100%;
pointer-events: none;
}

Like this you could set it as a 'background' image.

Where are you referencing the lottie .json here?

Got the same question.