Streaming live at 10am (PST)

How to make section pauses while scrolling?


#1

Hello, I just want to know how this is achieved with interaction 2.0.

Here’s the link

Notice when scrolling into section “Build custom,” the section paused, but the elements inside keep changing while we continuing to scroll.

How can we do this?


#2

Hi @billchien

This section is using CSS Sticky. You can watch those 2 videos, it might help! :slight_smile:

https://www.youtube.com/watch?v=JYuo5IfmLRI


#3

Hi @donaldsv,

Thanks for the reply! I watched both videos, the sticky container was explained, but how to animate the content within the sticky container so that when scrolling the content transitioning through fading, and there is a progress bar indicating at the same time?

To make myself more clear, notice the section “Build custom,” when scrolling, it has this scrolling-control-slides effect as things change from “business sites” to “design systems” (both title and explanation text are changing while scrolling).

I guess I’m looking for a more in-depth explanation of that “Build custom’ section.

Please let me know if you can help me with that too :slight_smile: Thanks a bunch!!


#4

Hi @billchien

I just replicated it. Here’s a read-only link so you can’t break it down :slight_smile:

https://preview.webflow.com/preview/build-custom-webflowhp?utm_source=build-custom-webflowhp&preview=88d9daf1d7df860f5b02319fe45db546


#5

Thank you so much @donaldsv!! :heart:

Seems like the paragraphs are layering on top of each other. Then I’m curious—the original page has a link following the paragraph on each layer. How do they do it in a way that I can click the link in the bottom layer even though there are layers on top?


#6

In this example I just put 3 paragraph components but you can totally replace them with div blocks with a paragraph and a link inside and make them display flex.

*Note that you’ll need to set the interactions on the divs instead of the paragraphs and the links.

Hope that makes sense!


#7

Yes, that makes total sense!
But my question is, since paragraphs are layering on top of each other, if I link a word in the paragraph that is at the bottom layer (imagine z-index=0), it wouldn’t be clickable since top layer (imagine z-index=3) blocked it.

How do they achieve this in the original page where I can click the link at the bottom layer (the first paragraph that shows up on the page when scrolling)?

Hope this make sense!


#8

Since they all have the same z-index, you would need to make them move up or down when they’re aren’t visible so that the visible layer is clickable.

The actual section on the Webflow site doesn’t use CSS grid so it’s a different approach!


#9

Do I need to write a script to make them move up and down? If so, how do I integrate that with the interaction? That’s the thing I’m struggling with :sob:

Thanks so much for keep replying me @donaldsv!


#10

No you don’t need to! just do the same thing I did for the titles (business sites, ecommerce sites, etc). The visible layer is in the middle, the next layer is at the bottom and the past layer is at the top. You can also put them in a wrapper with overflow hidden so they won’t be clickable while invisible!


#11

Thank you @donaldsv!! Working with links is tricky.

Just checked out the read-only link you updated, seems like some of the links in the paragraph is still unclickable, and only the one on the top is clickable :thinking:Maybe I just need to think around that?


#12

The paragraphs at the bottom don’t move up or down. The titles at the top do! It was only to show you the difference. Also, you can see that you still can click the link in the invisible title, that’s because you need a wrapper with overflow hidden :slight_smile:


#13

Got it! Thanks you! Wow.