Interaction based on scrolling position

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. Loom | Free Screen & Video Recording Software | Loom

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

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:

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

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

1 Like

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

1 Like

I will try also and share a screen record here.

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

1 Like

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:

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

1 Like

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

Got it! Thanks so much :slight_smile:

1 Like

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

Yay! Thanks :slight_smile:

1 Like