Streaming live at 10am (PST)

Interaction for section scroll into view

Hi there,

I’d like to make interaction for section scroll into view.
Like the sample below:


The section comes up to 100% and stop, turns to grey.
Then the text scroll in.
After the text goes to the right position, the whole section starts to move again.

Please see my setting right now below

Now the section just keeps moving. I am not sure if it relates to the animation boundaries…
If anyone can help me to find out if this interaction is possible to do or not, I really appreciate a lot.

Best regards,

Jessie


Here is my site Read-Only: LINK

Hi @msjessiewwang,
Welcome to the forum :webflow_heart:

You need to use position:sticky

Hi, @avivtech

Thanks for your reply.
Should I use the position: sticky for the section?
Once I make the section sticky, the text looks great when it comes up.
However, the section just sticks there and don’t move again.
How can I make the whole section scroll up again?

Best regards,

Jessie

Did you follow the Webflow tutorial?

Yes, I set the section position sticky.
The text in the section didn’t move…

Please kindly help me to find out how to solve it…

https://preview.webflow.com/preview/bodyboss?utm_medium=preview_link&utm_source=designer&utm_content=bodyboss&preview=9dcac5696943ebff6e08b70e2a47bdb9&pageId=5d312bcc6c7528855914904c&mode=preview

You need a wrapping div that the Section will move inside of it (now it is moving and sticking relative to the body).
Once you have a wrapping div, you should set the scroll interaction on it (since the sticky section does not scroll regularly).

Hi,

I made a div to wrap the section.
26

And try to set the section sticking relative to the div. But I just can’t change the setting.
36

Do you know why? :pensive:

Is it possible to have a simple video to show me the right step to make it?

https://preview.webflow.com/preview/bodyboss?utm_medium=preview_link&utm_source=designer&utm_content=bodyboss&preview=9dcac5696943ebff6e08b70e2a47bdb9&pageId=5d312bcc6c7528855914904c&mode=preview

Best regards,

The only thing missing now is that you give the Sticky div height (something bigger then the section feature full body height)

btw, your naming convention can be confusing.
The element you named sticky div is the wrapper of the sticky element.

Thank you!! finally made it!! :heart_eyes:
https://bodyboss-28a4c076777f84bdc52d45bca2a4d5.webflow.io/bodyboss-feature

1 Like