Interaction for section scroll into view

Design help General
1

Hi there,

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

interaction%20section%20sample
interaction%20section%20sample3638×1638 1.08 MB

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

04
043178×1724 1.05 MB
17
173186×1814 910 KB
26
26480×924 68.4 KB

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

2

Hi @msjessiewwang,
Welcome to the forum :webflow_heart:

You need to use position:sticky

3

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

4

Did you follow the Webflow tutorial?

5

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

6

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).

7

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,

8

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.

9

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

1 Like