ekfuhrmann Posted February 3, 2021 Share Posted February 3, 2021 I'm attempting to animate a static dot along an animated line, but I'm struggling with the Motion path tools, and may not be thinking about this in the correct way. To start, the SVG is clipped to allow me to draw an infinite line that moves up and down on repeat. In order to have it cleanly loop, I essentially duplicated the line outside of the SVG view and just move the position of it, giving the illusion of a never ending line. The illusion works well, but if there is a way any of you can think of that doesn't require doubling the width of the SVG, I'm all ears. I wish there was a `background-repeat` type feature which would have been great here. With that out of the way, all I'm trying to do is keep the dot along the line as the line moves across the screen. The dots X axis should be static, while the Y value has it move up and down. I was hopeful that I could achieve this effect using the Motion Path Plugin, but as far as I could see that results in the dot tracing along the x and y axis, rather than just the y axis. To compound on that a bit as well, the line path is exceedingly long in the SVG due to my earlier point relating to repeating the line, so the path trace isn't great. As such, I made a new path with coordinates that in theory should cover the dot along 1 full segment of the line. When looking at the codepen you will see I have commented out the Motion Path plugin for now, but someone more knowledgeable of the tool may be able to get that to work. I'm also definitely willing to go about building this differently if anyone has a better approach/idea to this rather simple animation. Thank you! See the Pen MWbarWP?editors=0010 by ekfuhrmann (@ekfuhrmann) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted February 3, 2021 Share Posted February 3, 2021 Hey @ekfuhrmann, Just these days a similar concept ... See the Pen oNYjqXQ by mikeK (@mikeK) on CodePen ... but the second bottle is lost. Too late for me today. Hmmm, ... yet another idea Happy searching ... Mikel Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 3, 2021 Share Posted February 3, 2021 You can use the MotionPathPlugin in combination with the (built in) modifiers plugin to do this sort of thing: See the Pen RwoWMYP?editors=0010 by GreenSock (@GreenSock) on CodePen Note that I didn't find the perfect looping values but you should be able to find the right start and end values to make it look good 2 1 Link to comment Share on other sites More sharing options...
ekfuhrmann Posted February 4, 2021 Author Share Posted February 4, 2021 Thank you so much @ZachSaucier! With your assistance I was able to get the animation done. Really cool, and quite simple in the end once I realized that my path was inverse to the ball (hence the end position being `motionPathNum - 0.33`). A completed example can be seen below, thanks again! See the Pen JjbYLgg?editors=0010 by ekfuhrmann (@ekfuhrmann) on CodePen 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 4, 2021 Share Posted February 4, 2021 Good work! You can remove the xPercent modifiers - I realized that it wasn't due to MotionPathPlugin but rather your original tween. I edited my original demo. Link to comment Share on other sites More sharing options...
mikel Posted February 6, 2021 Share Posted February 6, 2021 Hey @ekfuhrmann, hey @ZachSaucier, Great job - really cool. Mikel Link to comment Share on other sites More sharing options...
Obaid Nadeem Posted April 6, 2021 Share Posted April 6, 2021 On 2/4/2021 at 1:59 AM, ekfuhrmann said: I'm attempting to animate a static dot along an animated line, but I'm struggling with the Motion path tools, and may not be thinking about this in the correct way. To start, the SVG is clipped to allow me to draw an infinite line that moves up and down on repeat. In order to have it cleanly loop, I essentially duplicated the line outside of the SVG view and just move the position of it, giving the illusion of a never ending line. The illusion works well, but if there is a way any of you can think of that doesn't require doubling the width of the SVG, I'm all ears. I wish there was a `background-repeat` type feature which would have been great here. With that out of the way, all I'm trying to do is keep the dot along the line as the line moves across the screen. The dots X axis should be static, while the Y value has it move up and down. I was hopeful that I could achieve this effect using the Motion Path Plugin, but as far as I could see that results in the dot tracing along the x and y axis, rather than just the y axis. To compound on that a bit as well, the line path is exceedingly long in the SVG due to my earlier point relating to repeating the line, so the path trace isn't great. As such, I made a new path with coordinates that in theory should cover the dot along 1 full segment of the line. When looking at the codepen you will see I have commented out the Motion Path plugin for now, but someone more knowledgeable of the tool may be able to get that to work. I'm also definitely willing to go about building this differently if anyone has a better approach/idea to this rather simple animation. Thank you! Nice. How did you gave this front light effect that's coming out of the ball ? 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