Streaming live at 10am (PST)

Creating a half-scrolling area


#1

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!


#2

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:

http://side-scrolling-in-ix2.webflow.io/

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


#3

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


#4

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

Have Fun!


#5

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.


#6

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.


#7

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.


#8

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.


#9

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!


#10

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:


#11

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!


#12

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='https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.10.2/bodymovin.js'></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 “https://gist.githubusercontent.com” to “https://cdn.rawgit.com”]
    (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!


#13

Thanks so much for your help!