How do I make image follow path on middle point

[animationmagic 5 Likes (Newbie)]

Hi there,

 

I'm trying to build a seamless animation where my van image is centered in the middle with its light, and it is following the line.

 

The white dot at the left is from another codepen:  which I used as a starting point. That point follows the path perfectly, but whenever I try to make my van follow the path in the middle it still takes the path position (-33%)

 

Also, when I try to add my own path, it destroys the animation even more.

I would like to use this as my own path

      <path id="line" d="M0,251.32C59.82,242,144.24,236.61,205,247c24,4.11,51.08,16.94,93.28,17.46,51.08.62,85.58-13.89,110.91-21.77,46.78-14.55,71.87-9.48,225,4.42,154.49,14,231.73,21,263.29,20.4,157.16-3.08,161.25-38.87,254.58-20.52,107,21,131.36,73.93,210.74,60.61,63.78-10.7,66.12-50.36,142.89-69.32,65.67-16.23,129.58.42,193.86,8.47,92.31,11.57,189.23,6,280.72-8.29,292.41-45.49,315.9,15,621.94-1.28,293.86-15.63,282.72-46.8,401-24.71,151.74,28.35,230.58,91,380.35,64,56.7-10.22,79.74-21.4,168-37.43,69.39-12.61,149.91-9.39,220.58-9.3,52.95.07,131.22-1.76,227.87-4.31" style="fill:none;stroke:blue;stroke-linecap:round;stroke-width:10px" />

 Any help is massivly appriciated!

 

See the Pen KKqMMoe by lisaschumann (@lisaschumann) on CodePen

[nico fonseca 514 Likes (Leader)]

Hey @animationmagic welcome to the forum! 💚
You need to change the start/end values on the motionPath.

See the Pen 779fc6f97e73c787a0aa040aae96b527 by nicofonseca (@nicofonseca) on CodePen

Btw: I removed the second section because you have a lot of duplicate IDs and an ID has to be unique.

[animationmagic 5 Likes (Newbie)]

Thanks for the warm welcome @nico fonseca

 

That's brilliant, now it is moving along to the middle. How come I have to setting the start to 0.5 makes sense to me, but how come I have to set the end to 0.5 - 0.33?

 

Also, I'm struggling to use my own path for the line, but when I replace the current path with it, the van does not follow it anymore. I don't quiet know why:/

  <path id="line" d="M0,251.32C59.82,242,144.24,236.61,205,247c24,4.11,51.08,16.94,93.28,17.46,51.08.62,85.58-13.89,110.91-21.77,46.78-14.55,71.87-9.48,225,4.42,154.49,14,231.73,21,263.29,20.4,157.16-3.08,161.25-38.87,254.58-20.52,107,21,131.36,73.93,210.74,60.61,63.78-10.7,66.12-50.36,142.89-69.32,65.67-16.23,129.58.42,193.86,8.47,92.31,11.57,189.23,6,280.72-8.29,292.41-45.49,315.9,15,621.94-1.28,293.86-15.63,282.72-46.8,401-24.71,151.74,28.35,230.58,91,380.35,64,56.7-10.22,79.74-21.4,168-37.43,69.39-12.61,149.91-9.39,220.58-9.3,52.95.07,131.22-1.76,227.87-4.31" style="fill:none;stroke:blue;stroke-linecap:round;stroke-width:10px" />

 

[GreenSock 16,642 Likes (Superhero)]

50 minutes ago, animationmagic said:

how come I have to set the end to 0.5 - 0.33?

I think it's actually supposed to be + 0.33 because you're moving forward 1/3rd of the path. From what I can tell, the whole concept in that demo is to make the SVG 300% its normal size (so 1/3rd is off the screen to the left and right) and then animate 1/3rd to the right (the line animates xPercent: -33.33 and the other stuff animates forward along the path 1/3rd to compensate) and you're using the modifier to keep x in the same spot. 

 

There are several problems I saw when adding your path: 

• It doesn't fill the entire width perfectly of the SVG (which is 4125 - see the viewBox), thus when you animate xPercent -33.33 it is NOT moving in accordance with the entire SVG. To solve this, you'd need to edit your path. I solved it by appending "H4125" to the end of your path data.
• Your #van-timeline element is NOT at the correct spot horizontally, thus when you use the x modifier to reset it to 0, it's mis-positioned. The other assets are already at exactly halfway along the x-axis which is precisely where you're asking it to start on the path (start: 0.5). So if you want to place the #van-timeline at 0.57 along the motionPath, you can just update the cx attribute value to 0.57 * 4125. 
• You don't need any xPercent modifier because that value isn't being altered anywhere. 

Here's my updated demo - is this what you're looking for? 

See the Pen 32351162c51bfc27d1934a737debaada?editors=0010 by GreenSock (@GreenSock) on CodePen

[nico fonseca 514 Likes (Leader)]

1 hour ago, GreenSock said:

I think it's actually supposed to be + 0.33 because you're moving forward 1/3rd of the path. From what I can tell, the whole concept in that demo is to make the SVG 300% its normal size (so 1/3rd is off the screen to the left and right) and then animate 1/3rd to the right (the line animates xPercent: -33.33 and the other stuff animates forward along the path 1/3rd to compensate) and you're using the modifier to keep x in the same spot. 

 

There are several problems I saw when adding your path: 

• It doesn't fill the entire width perfectly of the SVG (which is 4125 - see the viewBox), thus when you animate xPercent -33.33 it is NOT moving in accordance with the entire SVG. To solve this, you'd need to edit your path. I solved it by appending "H4125" to the end of your path data.
• Your #van-timeline element is NOT at the correct spot horizontally, thus when you use the x modifier to reset it to 0, it's mis-positioned. The other assets are already at exactly halfway along the x-axis which is precisely where you're asking it to start on the path (start: 0.5). So if you want to place the #van-timeline at 0.57 along the motionPath, you can just update the cx attribute value to 0.57 * 4125. 
• You don't need any xPercent modifier because that value isn't being altered anywhere. 

Here's my updated demo - is this what you're looking for? 

 

 

That was awesome Jack! Sometimes is hard to explain how to prepare a SVG and you nailed it!!! 🙌   🙌   

[animationmagic 5 Likes (Newbie)]

Thanks so much Jack for such a detailed explanation. I feel like I'm understanding a bit more.

 

I then thought it might be a solution to create all SVGs in one illustrator file and export that so that it would all be within the same viewbox, but that seems to have made it worth, and I feel as though I'm missing the understanding of how I would center items within the SVG in the middle.

 

See the Pen KKqMMoe by lisaschumann (@lisaschumann) on CodePen

 

Earlier I only got the light to fit near the middle by nudging it and then exporting it again in Illustrator.

 

Also, my line is still jumping when it repeats rather than flowing like in this demo 

See the Pen JjbYLgg by ekfuhrmann (@ekfuhrmann) on CodePen

 

I'm sorry for so many question, I really appreciate your help!

[GreenSock 16,642 Likes (Superhero)]

32 minutes ago, animationmagic said:

I then thought it might be a solution to create all SVGs in one illustrator file and export that so that it would all be within the same viewbox, but that seems to have made it worth, and I feel as though I'm missing the understanding of how I would center items within the SVG in the middle.

Yeah, those elements weren't centered at all. 

 

I built a helper function that'll let you place things at a particular progress value along the x-axis: 

// puts the element at a certain progress value on the x-axis and records that as a "modX" property on that element
function setXPosition(element, progress) {
  element = gsap.utils.toArray(element)[0];
  let center = element.ownerSVGElement.viewBox.baseVal.width / 2,
      bounds = element.getBBox(),
      x = center - (bounds.x + bounds.width / 2);
  gsap.set(element, {x: x});
  element.modX = x;
}

So you could call that for any SVG element in there, and reference the ".modX" property (which is an arbitrarily-named property the helper function added) in the modifier to keep it at that spot. 

See the Pen BaZzZLp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

35 minutes ago, animationmagic said:

Also, my line is still jumping when it repeats rather than flowing like in this demo 

That's because your artwork isn't set up to seamlessly loop. Imagine moving your line 33% to the left and then immediately picking it up, moving it back to where it started, and doing the same again - you need your artwork to look seamless when doing that. For example, take a path, make sure its start and end placement on the x-axis match perfectly, then duplicate it twice, putting one on the left side and one on the right side so that when you move that whole thing 33.33% in either direction, it gets right back to what looks like its starting position. 

 

I hope that helps. 

[nico fonseca 514 Likes (Leader)]

@animationmagic I attached a SVG and AI file and a little Codepen so you can see how it works.
In the files you'll see two duplicated paths ( this is just so you can see how it works, but you will need to merge them into one), so with that it will be easier to calculate the animation since you only need to move -100%. 

See the Pen 26e4a281da950d94c7be7cae62d144e9 by nicofonseca (@nicofonseca) on CodePen

 

And this made me want to create some waves 🌊 

See the Pen MWoeERO by nicofonseca (@nicofonseca) on CodePen

 

line-final.ai line-final.svg

[GreenSock 16,642 Likes (Superhero)]

By the way, this thread might also be helpful for an alternate approach: 

 

[animationmagic 5 Likes (Newbie)]

@nico fonseca thanks so so much for this! super helpful. Loving the waves too!

 

And thank you @GreenSock for pointing me to the other thread.