I have a path ".curve-path" and a black circle that moves along it by scroll trigger. The circle can appear off-screen at times, so I've created a few "red" points p1,p2,p3 along the curve where the black circle should be positioned when those red points and scrollY are both at the center of the screen. While also maintaining smooth movement along the path when scrolling.
I don't want the black circle to snap to those red points and stay there until the next one appears on screen, but instead ensure it's positioned at those points by the time they are centered on the screen with the scroll. Basically, I want the black circles position to interpolate and move between those red reference points with also the start and end positions of scrollTrigger. So, it should move along smoothly as it does not but not overshoot off-screen.
Additionally, I would also to like to call myFunc() each time the black circles position updates and pass in the parameter of the progress of the black circle along the path like using self.progress, but it doesn't work for motionPath it seems.
Also the svg is intended to be full screen with width 100vw and height 100%, and should probably be viewed full screen