Streaming live at 10am (PST)

Curtain effect on a vertical scrolling site with multiple pages

Hey Team, I’m trying to get this curtain effect to work again. I have no clue why it randomly stopped working.
I have a single page website with multiple sections at 100VH.

Each section could be about, contact, informations, pictures.

As you scroll vertically it just shows those sections.

Theres a section in the middle of the page where I want to have a curtain effect.

The bottom layer will be sticky and its a social media feed.
The top layer is a gradient color that covers the bottom layer slightly…
As you scroll to this section, the bottom layer will stay, while you scroll… the gradient will reveal the bottom layer. The bottom will not now move until the top layer gradient is done scrolling and then you can continue to scroll down pass the social media feed to other sections of the page.

^Hopefully that makes sense… I been cracking at this for 15 hours now… still counting!

If anyone can guide me in the right direction again! thank you.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @Anchen_Huang, thanks for the post, II would give some distance that the element having sticky position, here is a good article: https://university.webflow.com/article/position-sticky

You must specify at least one position value for the top, bottom, left, or right side for sticky positioning to work. This depends on where your element is positioned within the parent and how you’re scrolling, vertically or horizontally.

I made a quick video:

I hope this helps

Hey cyberdave! Thank you so much for replying back so fast. You wouldn’t believe how happy I was to see you able to do it! I definitely had a big laugh of relief.

I had read the article you posted. Definitely some good resources.
I had attempted on my own with the mock up link I sent. And it worked perfectly.

Now attempting it on a project I’m doing. And it would not stick at all.

Can you take a look at what I’m doing wrong here?

It will be under the parallax background 2 section.

Hi @Anchen_Huang, thanks for your reply, I would make sure to give the offset for the element class having sticky position: https://share.getcloudapp.com/8LuwvkOW

I hope this helps

@cyberdave Hey Dave, I set 100px offset for the section 23 position sticky. z-index is auto.

Issue still persist where it does not stick.

Could it be that I have an UGC instagram feed EMBED as the bottom layer?

Hi @Anchen_Huang, thanks for your reply, it could be, the html embed is not rendered in the designer, only on the published site.

Also, I would check the structure in general, it seems you have sections nested inside of divs, I would reverse that to put sections under the body, then elements that will be sticky in divs, and divs nested inside of sections. That may not be the issue, but that is good practice to put sections directly under the body and then try to put all the sticky elements directly under the section.

If you put the section 23 class to position sticky with an offset of 100 px, does the site render ok on the published site?

The site renders properly. with the embed social media, and then the gradient top layer right ontop of it.
It just doesnt stick when i scroll.

The weird thing Dave, the mock template I sent you, and you were able to get the sticky done. I formatted the file structure the same way as my project.

There is likely a difference somewhere :slight_smile: that can be sometimes tricky if the difference is small, but enough to make an impact, I will be happy to check further, I will post if I can find a solution.

I might also test without the embed, and instead use an image instead to see if the behavior will work with another type of element, other than the embed.

Cheers

Sounds good Dave,

I’m going to try without embed… and continue to poke around.

Please let me know if you find a solution!

Thanks again Dave

@cyberdave Morning Dave, so I spent some time, recreating a new project.

Attempting the same curtain effect.
I was able to get the curtain effect work in editor mode, but once I publish and go to the published website. The curtain effect does not work.

Could there be a bug with Webflow being able to publish parallax curtain effects?

Hi @Anchen_Huang, no I doubt that is the case, the overall design can impact to the effect.

Can you help to share the read only link to the new project ( Share a project’s read-only link) and then let me know what page?

I can help to take a look further.

@cyberdave Hey Dave, I’m going to PM you the link to the project instead of public exposing it here. Please check your inbox.

Its a page under
section-2 Parallax 2

  • Chosen Family Gallery Page

thanks again Dave~ Hopefully we got a solution, don’t want the client to cancel subscription and project.

Please view it in Mobile only.
I haven’t got the time for the desktop version.