Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
animationmagic

How do I make image follow path on middle point

Recommended Posts

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

Link to comment
Share on other sites

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" />

 

Link to comment
Share on other sites

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

    • Like 3
    Link to comment
    Share on other sites

    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!!! 🙌   🙌   

    • Like 1
    • Thanks 1
    Link to comment
    Share on other sites

    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!

    Link to comment
    Share on other sites

    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. 

    • Like 1
    Link to comment
    Share on other sites

    @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

    • Like 3
    Link to comment
    Share on other sites

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

     

    • Like 2
    Link to comment
    Share on other sites

    • 1 month later...

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