Sticky until Interaction is completed

Hello guys :slight_smile: I am relative new to webflow but I want to learn how to design in it.
I just started my design and watched tons of tutorials online and tried out a lot. While I was trying out some stuff I came to a problem I couldn’t solve by myself. Can you help me?
I wanted to make a zoom like effect while the background stays in place.
You can see in my preview what I mean.(1)

The Animations itself works fine.
The Problem is that it keeps scrolling out of the picture. It should stay sticky while the wood board and the palm is moving out of the way and the background unblurs. After that it is supposed to keep scrolling and do the parallax effect like normal.
I tried with all kinds of options and couldn’t figure it out. I was trying to achieve something similar to this one: https://the-goonies.webflow.io/

(1): https://preview.webflow.com/preview/frank-schonholz-gmbh?utm_medium=preview_link&utm_source=designer&utm_content=frank-schonholz-gmbh&preview=fabc5f20182a8f2c5799acaa7727ab9a

Place all the content that should ne be scrolled before page finishes to load and intro stuff etc… inside of a div. Hide that div. Unhide the div with the IX, once page has finished loading.

Thank you for your help. Are you talking about the loading animation? I am not at that point yet, but found that solution online already.
What I mean is tho, that after the loading animation of the-goonies you can scroll. The scroll interactions triggers the trees to be bigger and has a zoom in effect. The background itself doesn’t move tho. I tried to achieve this. But my background (in the preview the bathroom) moves out of the picture.


When the palm tree and the wooden plank is moved out the bathroom itself already is half cut off. It is supposed to stay in place while the palm and wooden plank interaction is going trough and only after that it should move. I tried with sticky and all kind of stuff but I think I did something wrong since it wasn’t working.