Help - How-To: Layered scroll interaction site design (Reference Included)

Hi Webflow design community. This is my first time on this forum, but not to forums in general. So let me start by saying: Yes, I have searched for an answer based on passed posts, and yes, I have looked at the tutorials.

My question is not so much a question of ‘how’ but of ‘which way.’ Basically, I’d like to create a website with a layered scroll much like the one here: http://www.present-ism.com/

My issue is that Webflow’s functionality is so flexible and multi-dimensional that I don’t know which series of page elements to start with in order to achieve this functionality. At first I thought modifying a full screen cover slider would work, then thought full-page container-boxes would do the trick, however then I got more familiar with trigger actions and wondered if some combination of those would achieve what I wanted. Then I started playing with Flexboxes, absolute position pinning, modifying light boxes, and other strategies, and the next thing I knew, I’m down a wormhole I did not intend to travel.

Ultimately I would just really appreciate advice on which collection of page elements would be best to create this scroll effect, and ultimately what I would have to keep in mind, and/or include to achieve the same effect on mobile devices. The site I’ve included for reference for identically on both desktop and mobile.

P.S if my reference to “scroll effect” is too ambiguous, I mean the effect of a new full-height container-box appearing, and then layering behind the next one with each scroll of the home page, as if you were holding a magazine but flipping through the pages up and down, not right and left.

tl;dr:
Question: How to achieve layered scroll and overall page functionality like this website: http://www.present-ism.com/

Thank you in advance for any help you may have!! It is sincerely appreciated.

Hi @Motley see a demo below: http://layered-scroll-demo.webflow.io/ with the clone link here: https://webflow.com/website/Layered-Scroll-Demo

Let me know if this helps,

Arthur

This is amazing! Thank you guys SO much. I can’t tell you how appreciate
the help is. You guys absolutely rock!

Dz

1 Like

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