MotionPath the element follows the path but goes faster and then return before the scroll reaches its end

[aszuster]

I have the following issue and I don't know what exactly am doing wrong.

I have my path and my element which is following the path, it goes really well until the end, in wider screens you can see that the element starts to go down until it's not seen, then goes backwards when still scrolling down, also in any screen I'd like for it to stop when it reaches the end and go up again when scrolling up (also that the element could always stay at the center of the screen while it follows the path).

 

https://codesandbox.io/s/hidden-framework-klztsw?file=/src/App.js

 

This is my codesandbox to show you what I've been doing

Is there a way to fix this? I'm desperate I've been looking at this and searching for hours haha
it may have a lot of issues, I'm just starting sorry about that 😅

Thanks!!

See the Pen App.js by s (@s) on CodePen

[Cassie]

Heya! 

 

Welcome to the forums. I've been in this exact situation before and it's not fun.

The issue isn't GSAP - it's in your SVG path itself. You'll need to go back into illustrator and draw it so that it's just one stroked line (the pen tool is great for this) 
At the moment it's a big tangly mishmash of lines - screengrab below with the stroke value knocked down to 0.1px

Good luck with your project.

[aszuster]

Hi! Thanks!

Yes, I used the pen tool to create this, I don't know what happened, but I'll try to fix it then and see what happens!

[aszuster]

I'm trying to fix the line, I did one line with the pen tool with anchors, it's only one path in illustrator and I don't know where or why those other strokes are appearing.

https://codesandbox.io/s/hidden-framework-klztsw?file=/src/App.js
This is the last one I did but now the coin gets left behind at the beginning, is this still because the SVG is not an exact path? 
(btw how did you see the lines that zoomed in? Even at max zoom I can't see the line so good as the screenshot you sent, I'd like to use that to debug and see if I'm fixing something)

Thank you for answering!

Edit: https://codesandbox.io/s/twilight-violet-1k1f9f?file=/src/App.js this is another one I tried and the same keeps happening, is it still the line? Thanks!!

Edited March 23, 2022 by aszuster
adding more info

[Trapti]

hey, here is  updated codesandbox.  There are two values you need to take care of scroollEnd and height of the SVG. For now I added a static value. SVG height is 4000px and scrollEnd is 2000. Thing with your SVG is the line (path) is not covering the entire SVG means height wise it is not going start to end(In dev tools hover over SVG and the the path inside it, you will come to know).  Hence the difference 4000 and 2000. Either you fix that or manage this way. In order to make it flexible with all the device sizes you might have to calculate values and add it. I cleaned up few items in SVG. Hope it is not breaking other stuff 🤭.

 

 

https://codesandbox.io/s/gracious-hill-4s5fcy?file=/src/App.js

[aszuster]

Thank you so much!!! That seems to be it, I'll be working on it a bit more, I don't know how did you clean the SVG if you have a tip for that, would be appreciated, but either way thanks for all! 😄

 

[aszuster]

Hi @Trapti I'm really sorry to bother you again, but I have to make another different path for mobile and I'm having the same issue and I'm not sure how did you fix it, how to fix the SVG to work or fix the values, I tried using different values but I can't seem to match them to my path to work 😔

 

here is the codesandbox

https://codesandbox.io/s/gracious-bas-brddgn?file=/src/App.js&resolutionWidth=320&resolutionHeight=675

[Trapti]

Hey, The line SVG is overflowing horizontally. I will suggest fix that first.
This I am saying for you to learn.
Use static values and see what is working and then check why this value is working.
Also see how your SVG is for example SVG is 1000x 1000 but inside line element maybe of height 500. This you can check by just hovering over element in dev tools. Why this is important is because the target element may be SVG so the start and end values of scrollTrigger will work accordingly, but since line is shorter inside the SVG coin animation will not work proper.  
 

[aszuster]

Thanks for answering. I think the line is fixed now (I think both sizes are the same, but let me know if you still see a difference), but the coin goes ahead after some scrolling (at first it goes along fine). I tried to use different numbers in the scrollEnd variable (end in timeline), but none seems to work fine, if I put a higher number than 4000 (the height of the svg line) the coin will go and go back after reaching the end, If I put a lower number then it will go ahead and end and come back after reaching the end of the scroll. But with exact 4000 is not showing the coin at the center of the screen as the scroll goes by, you scroll and then the coin goes ahead an disappear from the screen.

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

11 hours ago, Trapti said:

Hey, The line SVG is overflowing horizontally. I will suggest fix that first.
This I am saying for you to learn.
Use static values and see what is working and then check why this value is working.
Also see how your SVG is for example SVG is 1000x 1000 but inside line element maybe of height 500. This you can check by just hovering over element in dev tools. Why this is important is because the target element may be SVG so the start and end values of scrollTrigger will work accordingly, but since line is shorter inside the SVG coin animation will not work proper.  
 

 

[Trapti]

I think it is working fine if you make scrollEnd around 7500. And that scrolling back can be fixed by toggle actions. You can check demo here  https://codesandbox.io/s/xenodochial-wave-spfsg5?file=/src/App.js

[aszuster]

It's still bouncing back before you scroll to the end of the line, when you start scrolling up from the bottom the coin doesn't start at the bottom of the line like in this one https://codesandbox.io/s/gracious-hill-4s5fcy?file=/src/App.js
I think that's because the end point is lower and in this previous example the end point is a bit before (up) the bottom of the line, but if I put the end point there in this one it goes crazy and the coin goes faster for some reason and goes ahead and out of the screen 😕 is there a way to fix the coin so that it stays at the center of the screen when scrolling down maybe? That way the end point could go at 4000 (or a bit less) which is the bottom of the svg path and then stay there at the end of the scrolling down and only go back up when scrolling up from the bottom. I'm sorry if I'm not making myself clear 😔

[Trapti]

Hey, looks like you did the same mistake you did for desktop. Create path with one stroke line. check attached image for reference.