iDVB Posted June 11, 2020 Share Posted June 11, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 11, 2020 Share Posted June 11, 2020 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. Link to comment Share on other sites More sharing options...
iDVB Posted June 12, 2020 Author Share Posted June 12, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 13, 2020 Share Posted June 13, 2020 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now