Is there a way to keep motionpath line ending in the center of the viewport at all times when scrolling as it does loops and various speeds?

[WEB1995]

 

Hi GSAP Gurus 👨‍🎓,

 

As you can see by scrolling the pathline sometimes phases in and out of the viewport depending on if its doing loop da loops or sideways moves, is there a way to keep it centered no matter what it is doing?

 

Thanks 🙏

 

Paul

See the Pen pomowEd by Andy-Adamson (@Andy-Adamson) on CodePen

[GreenSock]

Hi @WEB1995. That's actually a super complex thing to try to do because you've got some wild variation in the direction and pacing of the line. At some points the line is going UP...but you're scrolling DOWN. And sometimes it's going directly horizontal (so no vertical movement at all), while the page is scrolling down. So logically, it's literally impossible to have it "centered" the whole time (if the page is moving down and the line is moving up, see the problem?). You can sort of approximate things with the magic of that pathEase() helper, but it'll never be perfect:

 

See the Pen BaeaZqd?editors=1010 by GreenSock (@GreenSock) on CodePen

 

The only way to have it perfectly centered is to take an entirely different approach, like by putting everything in a container that you then translate it dynamically to keep it centered. That's not a super simple thing either, and it's well beyond the kind of help we can provide for free in these forums, but you can contact us for paid consulting services. 

 

I hope that helps!

[WEB1995]

Hey Jack,

 

Thanks for getting back, was bit sick with cold then on another job for a bit, haha yea tricky to almost impossible 😜 also asked Gemini AI as well and it said the x,y coords are not made available but offered a few workarounds but not pursued them as yet - did try a few crude ideas by moving a container around at certain time intervals but it was a bit rough and made the scrolling experience unpleasant - maybe if spent more time could smooth that out but actually be less hastle to adjust the svg a bit to play nice with scroll trigger and motion path 🤗

 

If do find a way will update the post, cheers,

 

Paul

[GreenSock]

This thread may be helpful: 

Good luck!