Share Posted September 2, 2021 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 More sharing options...
Share Posted September 2, 2021 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted September 2, 2021 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 More sharing options...
Share Posted September 2, 2021 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 3 Link to comment Share on other sites More sharing options...
Share Posted September 2, 2021 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!!! 🙌 🙌 1 1 Link to comment Share on other sites More sharing options...
Author Share Posted September 2, 2021 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 More sharing options...
Share Posted September 2, 2021 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. 1 Link to comment Share on other sites More sharing options...
Share Posted September 3, 2021 @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 3 Link to comment Share on other sites More sharing options...
Share Posted September 4, 2021 By the way, this thread might also be helpful for an alternate approach: 2 Link to comment Share on other sites More sharing options...
Author Share Posted October 5, 2021 @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. 1 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