Streaming live at 10am (PST)

Sticky Section + Image Reveal on Scroll

Hi,

I am trying to make the hero section layout of this Shopify Theme for my Webflow site: https://cuber-theme.myshopify.com

The hero is divided in two parts, the left side is scrollable while the right side is showing images.
When the left side is scrolled, the right side follow an inverted behavior, revealing the next image from the top with some sort of slitted display.

Here are some screens from the template preview page to understand the behavior:

Initial State:

Scroll Started: left goes upward, right goes downward

Scroll continued

I love this behavior but can’t figure how to make it in Webflow. I assume there is layout trick (layers ?, position ?, etc.) and maybe some interaction (while scrolling ?).

I would really appreciate your help on this topic since it’s key in my project.

Thanks

@martinreboux Quick and dirty:
https://labmr.webflow.io/sticky-reverse

GG !
How did you achieved that ?
Can you share the clonable project or explain the process ?

Thanks

Prepare something like this:

Can you share the project ?
I am not a pro Webflow user and seeing things in action helps me a lot (and other too).

Thanks Matthias :wink:

Here you can get a clone:
https://webflow.com/matthiasrauber

1 Like

Thanks mate, will have a look !

I managed to recreate the layout provided by Matthias and it works perfectly.

I only needed to make some tweaks because I am using this behavior within a section, not the entire page. I had to using the “while scrolling into view” interaction with some offset at the end to make it work.

Thanks a lot Matthias, hope it will help others !