How to imitate fixed phone effect on Revolut.com?

Design help General
1

Hi all!

Anyone know how to imitate the effect on https://www.revolut.com/ where when you scroll down the page, the phone graphic stays in one spot with the content on it changing, but the text beside it scrolls normally?

Ideally using native webflow animations and not resorting to custom JS?

2

You need custom code to apply position:sticky, as it is not supported by Webflow.

Everything else could possibly be done without custom code. You have multiple divs absolutely positioned on the phone screen, then hide all the divs but show the relevant one when you scroll into a section.

3

Here is one way. For the animated screen content I guess you would use a vid or ix2 interactions without too much fuss. Does this help out?

https://webflow.com/website/fixed-phone-scroll-demo?s=fixed-phone-scroll-demo

4

I haven’t tried myself, but here’s an excellent example created within Webflow and without a custom code Sticky On Scroll

5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.