Jump to content
Search Community

Motion Path Line Tracing

ekfuhrmann test
Moderator Tag

Recommended Posts

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

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

  • Like 3
Link to comment
Share on other sites

  • 1 month later...
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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...