Need some animation math help

[iDVB]

https://codesandbox.io/s/circle-to-image-main-hot9o?file=/src/index.js

 

We're wrestling with what's likely going to be a rather simple math equation but can't seem to nail it.

As you can see in this codesandbox, we have a circle animating down the screen and stopping along the way to interact with certain points along the way. 

 

Ideally, we'd love to figure out the proper durations for each so that as you scroll down the page the circle is always in the viewport.

 

If anyone can figure this out, we'd really appreciate a bit of detail in how the math works. Maybe it will unlock this for us so we can level up.

 

Cheers!

See the Pen index.js by s (@s) on CodePen

[ZachSaucier]

Start simply: position the circle somewhere down the viewport (where you want it to intersect with the target, perhaps the center of the viewport). Then the only other info you need is the distance from the top of the viewport to the target. The distance to travel is that distance to the target minus the location in the viewport where your circle is. In other words keep the circle fixed at point in the viewport that you want it to intersect with your target elements.

 

Once you have that working, then you can add in calculations for moving the circle up/down the viewport.

[iDVB]

Thanks @ZachSaucier

We've now discovered your `MotionPathHelper`, and in turn signed up for "ShockinglyGreen" Club to get these wonderful toys.

 

Now we're really noodling how we can control these type of animations, now that its setup using a MotionPath.

https://codesandbox.io/s/snowy-cdn-e2e3o?file=/src/App.js:2055-2415

 

We're now realizing that if we don't split the path up into multiple parts (likely use the points vs svg path), than we can't change the duration for "portions" of the animation so that it keeps the ball in the the viewport.

 

Is there some easy way to wrangle this so that we can get these amazing motionpaths AND get the ball to stay in the viewport?

[ZachSaucier]

15 hours ago, iDVB said:

We're now realizing that if we don't split the path up into multiple parts (likely use the points vs svg path), than we can't change the duration for "portions" of the animation so that it keeps the ball in the the viewport.

Probably not helpful in this case, but you might be interested in the achorsToProgress helper function for MotionPath?

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

 

15 hours ago, iDVB said:

Is there some easy way to wrangle this so that we can get these amazing motionpaths AND get the ball to stay in the viewport?

There's no magic bullet for this sort of thing. As I stated before I think keeping the ball in the center of the viewport on scroll to start is a good first step. Then you can add variance later.