ScrollTrigger and MotionPathPlugin - Move to points when center of scroll

[cv9]

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

See the Pen vYKEbwy by vcad (@vcad) on CodePen

[ZachSaucier]

Hey cv9.

 

In terms of getting the dot to hit the red circles a the center of the viewport, it just requires sizing things responsively and then playing around with the start and end positions, ease, and timings to get it the way you need it to be. There's not much other guidance that we can offer on the subject. I do recommend that you size your SVG more responsively though because the way you have it currently the path goes off screen in my browser no matter what window size I have. 

 

On 10/10/2020 at 3:45 PM, cv9 said:

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.

That's correct, self is something that ScrollTrigger has, not the MotionPathPlugin. To get the progress of a tween or timeline you should use a non-arrow function and use this.progress() instead:

onUpdate: function() {
  console.log(this, this.progress());
}

 

[cv9]

On 10/12/2020 at 3:25 PM, ZachSaucier said:

Hey cv9.

 

In terms of getting the dot to hit the red circles a the center of the viewport, it just requires sizing things responsively and then playing around with the start and end positions, ease, and timings to get it the way you need it to be. There's not much other guidance that we can offer on the subject. I do recommend that you size your SVG more responsively though because the way you have it currently the path goes off screen in my browser no matter what window size I have. 

 

That's correct, self is something that ScrollTrigger has, not the MotionPathPlugin. To get the progress of a tween or timeline you should use a non-arrow function and use this.progress() instead:

onUpdate: function() {
  console.log(this, this.progress());
}

 

Thanks for the help!

 

I understand that the path must be responsive and I have an algorithm that recalculates the path adjusting to the size of the screen. But I was hoping for how to do it with just this static example because if it can be done with a static example then the method can be transferred to the responsive version and it makes things easier to work with a static example.

 

So is there a way give scrolltrigger or motionPath some points (like the red ones) as reference in between the start and end, so that by the time each one is centered on screen the black circle is positioned there on the path. I'm not sure if "pins" for scrolltrigger can help for this example!

Then have the ability to update those points on resize? I suppose I should have added a start and end variables for the scrolltrigger and an array of points with their x and y positions so these data structure can be updated on the resize method!

[ZachSaucier]

4 minutes ago, cv9 said:

is there a way give scrolltrigger or motionPath some points (like the red ones) as reference in between the start and end, so that by the time each one is centered on screen the black circle is positioned there on the path.

There's nothing built in for that, no. 

 

4 minutes ago, cv9 said:

I'm not sure if "pins" for scrolltrigger can help for this example!

It might simplify your calculations because then you'd just have to pair the translation of the entire path with the timing of the ScrollTrigger. But it's possible without pinning it as well. 

[cv9]

Thanks again.

One final things, how about instead of points I manage to figure out what percentage of the total path length each of those points are at? So the first red point is 0.1 of the path length, 2nd point is 0.25 and etc... So you tell the black circle how much of the progress along the path it should have made and for each of those "markers" or "keys", and its associated scroll height in which they are triggered. So I have all the percentages and scrollY (height) for each of those "red" markers! Could ScrollTrigger and MotionPath do something with that information or is it just not possible? 

[ZachSaucier]

Again, what you're trying to do is definitely possible. But it requires just playing with the start, end, durations, and easing like I said at the start. There is no way to pass in a set of other values for ScrollTrigger to automatically adjust the timings based on.