Half sticky image & half scrolling text?

So I’d like an interaction similar to his half on half layout
However, as you can see by the image I’ve posted on this, I would like for the image to remain in place and for all of that text to reveal itself upon scrolling one by one up until the next section of my site. How can I do this without using any CSS, also If you can link a video or a clear and concise step by step that would be great thanks


Here is my public share link: LINK
(how to access public share link)

Hi!

To do this you’ll need to break it into 2 separate parts. And you definitely won’t need any hand-written CSS, as both of these can be achieved within Webflow without custom code :muscle:

Firstly, you’ll need to set up position: sticky on the photo. This is what will set it to ‘remain in place’ as the user scrolls down the page.

Here’s a few step-by-step tutorials on how to get that set up:

Creating a sticky sidebar | Webflow University (this one is for a Sidebar, but the principals are the same)

Secondly, to get the text reveal itself on scroll you’ll need to set up an Animation.

Webflow themselves have a great step-by-step tutorial on this (including a video) available here:

Hope these help - and good luck!:slightly_smiling_face:

Wow you are a live saver! Thanks so much

1 Like