How to draw a squiggly path alongside the 50% viewport with scrollTrigger?

[andre1melo]

Hi,

I've come to the mighty forums as I can't figure out how to get a complicated squiggly SVG path to always draw alongside the scrollTrigger (for example 50% of the viewport).

(As a @Carl student I feel like I should be able to figure this one out 😅, sorry.)

 

I tried to find any hint on the forums, but nothing seems to fit my particular question.

 

My objective is that the line is drawn always at a fixed position of the viewport (for example 50% of the viewport like in the demo), instead of its natural mapping to the line full length.

I've created a basic demo.

 

I am trying to replicate the effect of the blue line in https://cursor.sh/, albeit with a much more squiggly path.

 

Could anybody just point me in the right direction? I'm a quick learner.

 

Thank you so much!

 

P.S.- My crazy idea so far is to create an CustomEase with the shape of the SVG path?!?! Didn’t seem to work when I clumsily tried.

 

a1m

See the Pen bGJLqoY by andre1melo (@andre1melo) on CodePen

Edited April 5 by andre1melo
Adding my idea to solve it

[andre1melo]

I think I'm getting there.

I've split the path into 4 sections (they match the webpage sections it will be integrated in) and I'm building Custom Eases for each ScrollTrigger.

It's not the precise 50% viewport follow along I wanted, but it's fine, kinda more organic actually.

 

What an amazing set of tools you built!

 

But if anyone still knows a better way, please let me know.

 

Thanks!

a1m

[Rodrigo]

Hi,

 

Indeed this is mostly about creating a custom easing that works with your particular path, unfortunately this is mostly a trial and error approach. Good news is that we have the ease visualizer that can help you with this.

 

Basically what you need is a linear (no easing) or slower ease for the vertical sections, so the drawing is slower in those sections, and faster/steeper easing for the horizontal sections. The reason is that you need the horizontal part to be as fast as possible because the element is still scrolling up/down while the path is being drawn in a horizontal way.

 

I created a simple custom ease (doesn't resolve your issue though) so you can see in the ease visualizer what I mean:

"M0,0 C0.025,0.021 0.401,0.312 0.401,0.312 0.401,0.312 0.5,0.5 0.5,0.5 0.5,0.5 0.7,0.7 0.7,0.7 0.7,0.7 0.77,0.876 0.77,0.876 0.77,0.876 0.983,0.989 1,1 "

You can copy that string and paste it on our ease visualizer in order to see how that works, the faster parts are intended for horizontal sections and the slower ones for vertical sections:

https://gsap.com/resources/getting-started/Easing

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

There's also a helper function that may help: 

See the Pen vYMdMZN?editors=0010 by GreenSock (@GreenSock) on CodePen

[andre1melo]

On 4/5/2024 at 7:26 PM, Rodrigo said:

Hi,

 

Indeed this is mostly about creating a custom easing that works with your particular path, unfortunately this is mostly a trial and error approach. Good news is that we have the ease visualizer that can help you with this.

 

Basically what you need is a linear (no easing) or slower ease for the vertical sections, so the drawing is slower in those sections, and faster/steeper easing for the horizontal sections. The reason is that you need the horizontal part to be as fast as possible because the element is still scrolling up/down while the path is being drawn in a horizontal way.

 

I created a simple custom ease (doesn't resolve your issue though) so you can see in the ease visualizer what I mean:

"M0,0 C0.025,0.021 0.401,0.312 0.401,0.312 0.401,0.312 0.5,0.5 0.5,0.5 0.5,0.5 0.7,0.7 0.7,0.7 0.7,0.7 0.77,0.876 0.77,0.876 0.77,0.876 0.983,0.989 1,1 "

You can copy that string and paste it on our ease visualizer in order to see how that works, the faster parts are intended for horizontal sections and the slower ones for vertical sections:

https://gsap.com/resources/getting-started/Easing

 

Hopefully this helps.

Happy Tweening!

@Rodrigo Thanks! That's what I ended up doing.

Once you get the hang of going back and forth to the ease visualizer (it would just be impossible without it) you begin to see the relations between the curves and the path movement. It's laborious but interesting!

 

As a reference for anyone trying this approach in a framework with SSR (I'm using Next.JS) always leave your markers on until you are done! I came across a problem with the ScrollTriggers getting moved up when I refreshed the page (because the whole document wasn't ready), and only noticed it far ahead. Had to implement a fix (A ScrollTrigger on the 'body' with a ScrollTrigger.refresh();) and had to start over... I would have noticed the markers being offset if they were on... <<trial and error>> indeed.

 

14 hours ago, GreenSock said:

There's also a helper function that may help: 

 

 

@GreenSock This helper function is like magic to me!

Your initial description says it all <<Helper function that returns an ease that bends time>>! I love it.

It's beyond my current coding full grasp, I can kinda read the code, but towards the end get lost in its complexity.

None the less it mostly works. I'll definitely use it eventually.

 

Thank you both!

As always, the best community I've ever seen.