Issue with image following a path with MotionPath and ScrollTrigger

[aszuster]

Hi! I'm using GSAP on React, making an animation with ScrollTrigger and MotionPath, I need the coin to follow the SVG path scrolling down from start to end and then go back when scrolling up. While the coin is on the path needs to always be on screen (ideally center), until the end and then stop there, only going up again when scrolling up from the bottom. Nothing too special really, something like this https://codepen.io/delwinh/embed/OJMRYbd?height=450&slug-hash=OJMRYbd&user=delwinh&tab-bar-color=%23222&name=cp_embed_1 but without the DrawSVG

 

My animation is almost there, but I'm having a problem at the end, the coin starts going back up before you scroll past the bottom of the path, and I need for it to stay there.

I think if I set the scroll end to the size of the SVG (4000) then it should work like that, but when I do that the coin starts going faster in the middle and goes offscreen, so in order for it to stay onscreen while scrolling down the path I had to set the end to 7500.

I don't know how to make both things work

 

Here is a codesandbox with what I've been trying, my code so far

 

https://codesandbox.io/s/dark-fast-bu7bgu?file=/src/App.js&resolutionWidth=526&resolutionHeight=675T

Thank you!

See the Pen App.js&resolutionWidth=526&resolutionHeight=675T by s (@s) on CodePen

[OSUblake]

Hi aszuster, 

 

Please don't create duplicate questions. I don't think it's bouncing. Your path is probably just wrong and it's going up to the top. That's something you'll need to work out in your SVG editor.

 

If you want it to stay centered, @mikel has some good demos here.

 

 

[aszuster]

25 minutes ago, OSUblake said:

Hi aszuster, 

 

Please don't create duplicate questions. I don't think it's bouncing. Your path is probably just wrong and it's going to be up to the top. That's something you'll figure out.

 

If you want it to stay centered, @mikel has some good demos here.

 

 

Hi OSUblake, 

Sure thing I will not make another thread, what should I do if I still need answers? Should I bump the other thread? Or just let it die?

"Your path is probably wrong", what makes you say that before checking it? if you say "probably" I'll assume that you didn't see it. The last person to answer me already said that the path was fine, but thanks for answering anyway, I'll check those demos out and see if I can get an answer to this issue! 😊
 

[OSUblake]

1 hour ago, aszuster said:

"Your path is probably wrong", what makes you say that before checking it?

 

A motion path is not going to bounce at the end. That, and the fact that I can literally see that it goes back up to the top. 

 

1 hour ago, aszuster said:

Sure thing I will not make another thread, what should I do if I still need answers? Should I bump the other thread? Ok.

 

Sure, maybe if someone hasn't responded in like 24 hours.

 

 

 

[aszuster]

1 hour ago, OSUblake said:

 

A motion path is not going to bounce at the end. That, and the fact that I can literally that see it goes back up to the top. 

 

 

Sure, maybe if someone hasn't responded in like 24 hours.

 

 

 

Hey! Thank you!!! 😊 Now can you tell me how do you guys see that? 😦 Because even with all zoomed in I can't see it and because of that I can't really fix it. But anyways, yea, that's my bad, that is a double line because I tried so many things and that one was expanded, but here it is with only one line, and it's even worse, it doesn't even follow the path 

https://codesandbox.io/s/spring-sky-dwys2e?resolutionWidth=714&resolutionHeight=675&file=/src/App.js

I make it with the pen tool in illustrator, and it is really only one line, but I don't understand what is doing when I copy the code, I'm trying to search for some kind of way to at least edit the path only from code maybe? because this way doesn't seem to work.

I'm really sorry I made another thread I'm really desperate 😔

 

[OSUblake]

1 hour ago, aszuster said:

Now can you tell me how do you guys see that? 😦 Because even with all zoomed in I can't see it and because of that I can't really fix it

 

I just changed the stroke-width to 1. At 5, both lines are going to overlap so you're not going to see it. Another clue that path wasn't correct is the Z at the end of the d="...0 112-114.69V0Z". If it didn't loop and you had a Z on the end, you'd see a line connect the start and end point.

 

<path
            className="theline"
            ref={(el) => {
              theline = el;
            }}
            d="M338.38 4000v-278.2c0-84.49 98.85-189.72 204.86-189.72l92.47-.79v-790l-154.64-.8c-94.86 0-166.69-75.05-166.69-159.55 0-37.8-1.27-70.3-1.58-113.57A133.36 133.36 0 0 0 179.43 2335H97.65v-636.43h176.79a92.64 92.64 0 0 0 92.64-92.63v-317.35a114.42 114.42 0 0 0-114.42-114.42h-185A67.61 67.61 0 0 1 0 1106.56V420.75a179.42 179.42 0 0 1 179.42-179.42l121.23-2.92a115.69 115.69 0 0 0 112.89-115.66V0"
            fill="none"
            stroke="#ccc"
            strokeWidth="1"
          />

 

1 hour ago, aszuster said:

I make it with the pen tool in illustrator, and it is really only one line, but I don't understand what is doing when I copy the code,

 

You probably just made it backwards. I think there's a command to reverse it in Illustrator, but I can't remember off the top off my head. Just redraw it in the reverse that you did that one. So if you drew it starting from the bottom going up, then try again going from the top to the bottom.

 

[PointC]

43 minutes ago, OSUblake said:

I think there's a command to reverse it in Illustrator, but I can't remember off the top off my head

Object → Path → Reverse Path Direction

 

You can always check the direction while you're working with a little arrow trick.

https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/

[aszuster]

4 hours ago, OSUblake said:

I just changed the stroke-width to 1. At 5, both lines are going to overlap so you're not going to see it. Another clue that path wasn't correct is the Z at the end of the d="...0 112-114.69V0Z". If it didn't loop and you had a Z on the end, you'd see a line connect the start and end point.

 

4 hours ago, OSUblake said:

You probably just made it backwards. I think there's a command to reverse it in Illustrator, but I can't remember off the top off my head. Just redraw it in the reverse that you did that one. So if you drew it starting from the bottom going up, then try again going from the top to the bottom.

 

3 hours ago, PointC said:

Object → Path → Reverse Path Direction

 

You can always check the direction while you're working with a little arrow trick.

https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/

Thank you so much!!! Al of this is really useful, I'll be trying this out! Sorry about earlier