Hiding Animation in One Section Behind Section Below

[rbush (Ryan Bush)]

Hi, I’d really like to know how to hide a lottie animation in one section behind the background of the section below.

Here is my current page preview: https://preview.webflow.com/preview/aeropay?utm_medium=preview_link&utm_source=designer&utm_content=aeropay&preview=2f4889c5298d63e1b2a4a112ec9d8d9f&pageId=60be32c8bd35b972d98fe706&workflow=preview

On this page I want the animation on the bottom right to be hidden behind the gradient section below the top. The absolute positioning is the only way I could find to layout the animations on this page and that makes the overflow settings in the parent elements obsolete.

Is there a way to have the bottom half of the animation hidden behind the gradient section while keeping the page layout the same, and how can I go about doing that?

Thanks!

[vincent (Vincent Bidaux)]

You’re using Absolute for the anims, but you forgot to set their reference. The rule is an absolute positioned object is positioned relative to its closest positioned parent. So either the grid element or the parent section (i did the section) must be position:relative and not static.

[rbush (Ryan Bush)]

Oh wow I did not realize that. Thank you very much!