How to re-create this: foreground object stays in place while background scrolls?

I love what is going on here:

The phone seems to float in place during the scroll, but the context/background switches. How did they get the **phone frame to stay in place ** while the background scrolls? Can webflow do this? A tutorial on this would be great!


Ok, answering my own question. I tried using the float property on the phone container and got this far.

Now the next steps are to be able to trigger particular animation on the screen when the backgrounds change. Am i on the right track?

Hi @srile,
yes, I think you are going in right direction.
Unfortunately, I don’t have enough time for make detailed tutorial, but can point main steps:

  1. Make interaction with scroll trigger
  2. Inside the “phone” element there should be few divs with content that you want to show.
  3. “Phone” element should have overflow: hidden.
  4. Interaction should be something like: when some section comes to the screen view, particular image (content,div, etc) moves to the “phone” view.

Hope it helps,

1 Like