"Mobile mockups change on scroll " interaction
This interaction is perfect for displaying steps of a process, timeline or any moving component alongside short descriptions or stories.
5 mobile mockup images have been used in this template to demonstrate a process. These 5 images slide up and down inside a frame as the user scrolls through the home page. You can easily replace the mobile mockup images with your own images (they don't even have to be mockups!) directly inside the Webflow Designer.
Notes
- You don't need to have changing mockups/images on the left-hand side. A single image may also serve your purpose. In this case, just deleted all images except the first through the Designer, and you should be good to go.
- You can also increase or decrease the number of images according to your content. Just make sure each image in this interaction has a different class name so that their movements do not overlap with each other.
- To edit the interaction itself, go to the Interactions tab (top right in the Designing mode), click on the "Mobile mockups change on scroll" interaction and edit away! [Pro tip: Toggle on the "Live Preview is On" option while editing the interaction so you can see exactly how it behaves as you scroll through the page]
- For further help or customization, please feel free to reach out at zoya@museonline.co.
