Keeping Focus of MotionPath object in center of viewport when using ScrollTrigger & MotionPath Plugin

[mso web agency]

Hi, I'm trying to ensure that the focus of my Animation stays in the viewport at all times while running. I'm using ScrollTrigger to animate on scroll, Which it kind of works, However the speed it runs sends it off the screen and i can't seem to work out how to keep it centralised.

Another thing, Using the MotionPath plugin, is it possible to do additional animations when inside specific areas (each area is highlighted within my CodePen) or would that require the path being broken into sections and animate each section as a new path?

Any help is appreciated. Thankyou :)

See the Pen b102ab3822fcb5225f0edaaba98feae7 by msoweb (@msoweb) on CodePen

[GreenSock]

Yeah, that's a very challenging thing to pull off because you've gotta map the progress of that path to the scrollbar, so it'd go much faster when the path is going sideways, etc. I spent a bunch of time creating a helper function to accomplish this and I've implemented it in your demo here: 

See the Pen rNPvbRE by GreenSock (@GreenSock) on CodePen

 

I hope that helps!

 

Thanks for being a Club GSAP member. 💚