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 Thanks a bunch!!
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?
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.
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)?
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!
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 Maybe I just need to think around that?
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