Streaming live at 10am (PST)

Creating a half-scrolling area

I am trying to create a site that has half-scrolling sections, like this website in its “about” and “work” sections. The way I have set it up so far is with a div on the left with a height of 100vh and a series of 5 divs on the right each with a height of 50vh, totalling 250vh. I then created a wrapper for my 5 divs and set the overflow to scroll.

However, I would like to achieve two more things:

  1. Allow the right side to scroll when scrolling in the left side. This means if you place your mouse on the left side of the screen, it does not allow the page to continue scrolling until the right side has been fully scrolled-through, so to speak. (As seen on the aforementioned website).

  2. Don’t allow scrolling on the right side until that section has reached the top of the page. This means you can’t scroll through the 5 divs until the left div is taking up the whole screen. (Also done on this website).

Any help would be much appreciated!

Hi @tarlyo I see what you’re talking about. Now there’s tutorials on how to do this ‘horizontally’. But you would need to change this vertically. I can visualize how to do this in my head… haha… but get it out in a text for you is another thing :slight_smile:

First check out these tutorials:

Let me know if these make sense? If not, I will help get this out on paper for you.

Thanks @garymichael1313, but I actually managed to figure it out with help from another post on the forum which had a read-only link to @sabanna’s sandbox site (which is great, by the way).

If you want to, take a look at what I managed to do:
Read-Only Link
Published Site


Ooh very nice! That is sweet. Thanks for the link, I’m gonna go try that right now :slight_smile:

Have Fun!

Wait!!! That hero is interactions?? Whaaat? No, really? Gotta be animation from script.

Oh btw what’s the other posted forum thread, I want to go check it out and try the scroll effect too.

Here is the link to the other post: Half on half layout in sections – one half scrolling other one static

I also wrote detailed instructions for myself to create the half-scrolling layout, if you want more of a step-by-step and less of a hint.

The hero animation was made in After Effects and exported to a script using a plugin called Bodymovin. Tough to figure out in terms of integration with Webflow, but if you want tips, just let me know. I resolved so many issues just trying to add it to my site, I think I must be some kind of expert now lol.

Hahahah :wink: Well your site looks really really good now. I like the minimalist approach. Thanks for the link. I might hit ya up for After Effect advice. I’ve not used that app in my Creative Cloud, kind of wanted to avoid the fee. Obviously used to PS, and just converted to Affinity, so I may give AE a try.

Dang I’m looking at the example in read-only and live… I cannot wrap my brain around how the interaction works… this is crazy… I’m stuck. I guess I need to look at this longer to get a grasp. I’m not seeing how the scroll stops and then starts only on that specific section. ugh.

I personally love After Effects. It takes a bit of time to figure it out, but once you understand it there are endless possibilities and ways to bring your work to life.

To be honest, I don’t understand how the scrolling interaction works either. I think it has something to do with showing and hiding different versions of the left section based on the scroll-into-view and scroll-out-of-view of the right section. Not entirely sure, but as long as it does what I want it to do, I’m happy!

No doubt. As long as it works (and doesn’t break). Oki doki I’ll tackle this tomorrow when I’m not watching football. See ya :football:

1 Like

Hi! I just started using Webflow, but I’m familiar with bodymovin. Can you share your step-by-step instructions on how you implemented bodymovin with Webflow? I have an After Effects animation exported as Bodymovin jason file and I want to use it for the states of a mouse over click animation. Thanks!

Hey @araize!

It’s been a while since I’ve worked on my site with bodymovin, but I’ll try to help as much as I can!
Here are some instructions:

  1. Put this line in the custom code section of your page or the site inside the <head> tag: <script src=''></script>. This connects your site to the bodymovin.js library.

  2. Upload your JSON file to Github as a secret gist, then view it as “raw.” Keep the raw tab open, as you’ll need to copy the link as part of the next step.

  3. In Webflow, create a <div> element to hold your bodymovin animation. Go to its “Element Settings” tab and add the following custom attributes:
    (1) Name: data-animation-path, Value: [here, paste the link to your raw secret gist, but change the first part of the URL from “” to “”]
    (2) Name: data-bm-renderer, Value: svg;
    (3) Name: data-bm-loop, Value: true (if you want it to loop) or false (if you want it to play once)
    (4) Name: data-bm-autoplay, Value: true (if you want it to autoplay) or false (if you don’t want it to autoplay)

If I’m remembering correctly, you should be good to go after doing all this, but remember that you won’t be able to see your animation in the designer or in the preview, only when you publish the site. This makes positioning bodymovin animations a little tricky, but with enough playing around, you should be able to find something you’re happy with.

Best of luck!

Thanks so much for your help!

Hello, Tarlyo!
Finaly I found what I’m looking for. I’m new here and a couple of days I’m trying to do similar animation like in your preview (, where the project on click jump nice to the top of the section with all the content and also backward. Can you please explain how did you do that, with interactions or with the code? It would be very helpful.

Hi @Quinny!

Are you referring to the way my projects open on my site (where the right side gets bigger and also scrolls to the top of the section)? Or just that when you click on a button, it scrolls to a certain section (like inside one of my projects, when you click on one of the sections in the “Overview” panel on the left side)? I’d be happy to do my best to help you out- just wanted to clarify exactly which interaction you’re referring to!

Thank you for response! Yes, I would also like to know how the one half gets bigger. And if the content is made on the same section? I really appreciate that you trying to help.

My site is built with two halves, one left and one right. When the “Learn More” button is clicked, I use legacy interactions to increase the width of the right half and decrease the width of the left half. To make the content appear, I use another div element that is originally set to display: none. When the “Learn More” button is clicked, I use a legacy interaction on the button to set the display of the previously-hidden div to block. Does that make sense?

Thank you for that response. One more thing I would like to know is how your previously hidden site go normaly on the top of the sceeen, when you click learn more button?

The “Learn More” button is also a link that goes to a page section. The page section it is linked to is the one that gets shown on click.

You can learn more about anchor links here:

Thanks for reply. Do you have a hidden page as a new section or just a page? I just don’t know how to do that the page goes smoothly on the top of the screen when you clik on the link . If I do that, my page opens somewhere in the middle and I have to scroll on the top. I’m sorry for so much questions but I didn’t figure out how to do that …