Streaming live at 10am (PST)

Make section remove sticky position

Hi!

I’m trying to create an animation while scrolling, when the section hits the top, it’s sticky for a second, but once scrolled further, it doesn’t stick anymore. Now i got the sticky part right, but how do i make it so it can scroll again?

i’m trying to do this: https://www.boldscandinavia.com/ (first animation on website when scrolling).

Thank you!

Bump. Still haven’t figured this one out :confused:

Hello @kwievu,

What you need to do is to make the the parent element of your sticky element have a certain height, lets say 300vh, once that height is scrolled, it will go back to scrolling again. If you want something like the example you have, you will need to also add a “while scrolling” interaction on your sticky element. I hope this helps.

Hi Pablo, I kind of understand what you are meaning but have no idea how to execute it properly, would my read link help you?

https://preview.webflow.com/preview/buro-a1?utm_medium=preview_link&utm_source=designer&utm_content=buro-a1&preview=3d97948d5804a29b1689683440c528da&mode=preview

Thanks!

I will give a try @kwievu, what section and element you want to make sticky ?

The first big black one (masq). If you could show me how to do one, i can do the rest. Thank you!

Hello @kwievu,

So I did a quick video to show you the basics, I based it on what you already had. Ideally you need a section with a long scrolling area and a div inside with position sticky. Here it is https://www.loom.com/share/3af5947253604e60aa26ce8412a53544. Let me know if you have any questions.

Following along here, what determines the use of 300 VH, is that just what is dictating how long the element is sticky?

Hello @Tombo,

So that could be whatever you want. It depends on how much scrolling space you need for your sticky element.

1 Like

Thank you Pablo!
This was a great video, it works perfect!
Yup i’m playing around with that 300VH to make it feel more smoothly.
Cheers!

1 Like

Hello @kwievu,

I’m glad it worked out for you. Good luck with your website!

1 Like