I need help with an interaction on my website

https://preview.webflow.com/preview/clique-7c9622?utm_medium=preview_link&utm_source=designer&utm_content=clique-7c9622&preview=07f6c0cc7b9cee4e55230251c3eef90e&mode=preview

Above is the read-only link to my website.

I am creating a transition for my website where the user will scroll down the page and the lottie animation of my logo will connect together before transitioning into my home page.

For my homepage, i have created a container that is 100% vw and 100 vh, inside this container (for prototype sake) is a div block which i want the user to be able to interact with. However the section above which contains my lottie animation and background is above this container meaning that i cannot interact with it. Does anyone know how i can possibly get this function to work?

I have tried changing the z-index values for the section containing my lottie animation and my container however this doesn’t work and just results in the div block appearing in front of the section and ruining the transition.

Any help is much appreciated, Thankyou :slight_smile: