Jump to content
Search Community

Move image along svg path

Dzoniis test
Moderator Tag

Recommended Posts



I have svg with two paths, i need second path to follow first path, i tried with tween and motion but cant make it work at all, does anyone have an example or something that can help me resolve this problem

Link to comment
Share on other sites

Hi @Dzoniis :)


Welcome to the forum.


Are you just asking about basic usage of the motionPath plugin? Here's an example of a spiral path and a rectangle animating along it. 

See the Pen PoWBYXm by PointC (@PointC) on CodePen


The docs should have most everything you need to dive deeper into the plugin.



If that's not what you're asking, could you please provide a simple demo?



Happy tweening and welcome aboard.



  • Like 6
Link to comment
Share on other sites

1 hour ago, Dzoniis said:

i need it to go to certain point on click, can you provide me with documentation


There's no documentation for something like that. It's going to require some custom JavaScript.


And what do you mean click? Do you mean click anywhere on the path and have the bike go there? If so, that can be extremely complicated. Or do you mean click on visible points on the path, and have the bike move there? Like predetermined points? That's a little bit easier.


  • Like 1
Link to comment
Share on other sites

Yep. As Blake mentioned we need some more info from you. If you just want it to stop at a certain point on the path, you can use the end property.


From the docs:

Number - The position along the path at which to end, where 0 is the beginning, 1 is the end, and 0.5 is in the middle. It can be any positive or negative decimal number, including a value that's less than the start (which would make the object travel backwards). For example, 0.3 would have the element end at the 30% point along the curve. 1.5 would make it loop around back to the beginning and stop at the halfway point. Default is 1.



  • Like 2
Link to comment
Share on other sites

Main problem i am having is that i can't set start/end and how do i call that on click, what i am trying to achieve is that while im having this svg on bottom of the page, when i use scrollTrigger to move horizontal slides for this svg ( bicycler to follow path-track to specific point )

Below is the codepen with svg and my failed code...


Link to comment
Share on other sites

I think those pens Blake posted should help.


Just FYI - your current setup with start: 0.5 and end: 0.7 aren't working the way you'd think because those are way outside of the viewBox. Your motion path is over 16,000 pixels wide and the viewBox is set to 500 wide. To see the bicycle in the current view you'd probably want something around start: 0.05 and end: 0.09. Since this is a simple horizontal move, you could animate the viewBox left and right while keeping the bicycle centered in the view. Lots of ways to do it really, but as Blake mentioned, we can't really build full projects. We're happy to assist with any and all GSAP related questions though.


Happy tweening.



  • Like 2
Link to comment
Share on other sites

Hello, thank you all for your patience and responses :)

I think i didn't explain my problem fully, main issue is that i can't apply second path ( #target ) to ( #path ), i saw that scrollTrigger gives me options to move that svg along the line of path, i just can't seem to find a way to connect it in proper manner... i've tried using official greensock codepen "Horizontal section scrolling" but can't apply it to my example.. 

I have scrollable sections ( horizontal ) and whenever i scroll i need svg to move 

See the Pen ZEeWPEN?editors=1111 by nikolamilovac (@nikolamilovac) on CodePen

This is so cloose

on forward scroll, its going too fast and jumping..

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...