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

Hi,
I love what is going on here: Shareable Online Calendar and Scheduling - Google Calendar

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!

shridhar



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

https://preview.webflow.com/preview/floatingphone?preview=40f55d340f552571584de9be89173491

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,
Anna.

1 Like