โ–ผ
Streaming live at 10am (PST)

Interaction based on scrolling position

#1

I am creating an interaction that starts when the page is scrolled to 30%. But I would like the same animation to happen even at 50% and 80% of the page scroll. How can I do that?

Here is the video to the animation. https://www.useloom.com/share/a35eb39344c54d39bd8c8fddc9d4e3f6

The animation I am referring to refers to the yellow line under the text in the center of the page.

Thanks :slightly_smiling_face:

1 Like
#2

Hello @Chethankvs

You have multiple yellow lines on the page and you want them to have the same animation? Am I right?

Can you share your read-only link?

Piter :webflow_heart:

#3

Yes. That is correct. But I want them to happen as and when I scroll further down.

https://preview.webflow.com/preview/prithvis-first-project-6817c8?utm_source=prithvis-first-project-6817c8&preview=785301eb70662ee52b544db02c7af1a1

1 Like
#4

Why not using element scroll into view trigger? Not page scroll trigger

1 Like
#5

Oh okay. I will try that. Thank you :slight_smile:

1 Like
#6

I will try also and share a screen record here.

#7

Yes. That would be super helpful. Thank you :slight_smile:

1 Like
#8

Hereโ€™s my approach > https://www.useloom.com/share/8ce8312d1f3142f4883c1a6b8e14c9be

Actually I will use size instead of scale and also % for the lines width so they can be always the same width as the heading above. I will go to the store and when I come back I will record another one.

Piter :webflow_heart:

#9

This is awesome! Thanks so much. So the Offset of 30% means 30% of the viewport and not the full page right?

1 Like
#10

Yes, exactly. 30% from the bottom of the viewport

#11

Got it! Thanks so much :slight_smile:

1 Like
#12

Hey man! The first thing I will show you is the lines trick.

@Chethankvs See here > https://www.useloom.com/share/2351a9982ef3426695d4c62a709e487a

Piter :webflow_heart:

1 Like
#13

Yay! Thanks :slight_smile:

1 Like