Text on top of Lottie Animation

Design help General
1

Hi All,

I would like to have header text sit over my a Lottie animation. Is this possible?

I am hoping to use my lottie animation as my header video (aka background video) and have the heading text sit on top of the animation.

I’m sure there’s an easy fix to this, but I can’t quite figure it out.

Thanks!

2

Yes.

Over, under, you can consider a Lottie Animation Media Element as any other HTML element. It can be transparent and see-through, it can be covered.

You can use any of the positioning techniques to have your title over the animation. e.g. use absolute positioning on your title block (make sure the parent uses relative positioning).

And you’ll use z-index values to set which element is on top of another.

Example here where I have the bubbles to hover the Lottie anim: https://rea-app.fr/ It’s convenient because as the bubbles are made of HTML and CSS, and aren’t part of the After Effect scene, it’s much easier for the client to change the copy inside of the bubbles, it doesn’t require the designer (me) to edit the AE scene, re-export and import again in Webflow.

1 Like
3

Thanks Vincent! Much appreciated!

1 Like