motion path

[rala]

Hi, I try to use path from illustrator in place of the one is used in the motion path example but the astronaut didn't continue the animation may I know why this happened.

thanks in advance 

See the Pen mdMvBqy by roleno (@roleno) on CodePen

[Cassie]

Hi @rala,

 

Your viewBox value is wrong, that might be something to do with it?

 

Now it's correct you can scale the SVG to whatever height you need.

See the Pen zYdeELm by GreenSock (@GreenSock) on CodePen

 

[rala]

Hi, I update my view Box but I don't think this is the problem because I want my path to fill the whole page height which is 3000px and when I did that the animation not complete  can you please help me ? 

[Cassie]

Hey again - are you trying to do this?

See the Pen vYJbdRY?editors=1010 by GreenSock (@GreenSock) on CodePen

You weren't actually including scrollTrigger in the JS panel. 🔧

You'll also need to get your start and end markers in the right place and add ease: 'none' if you want the astronaut to stay in view as you scroll.

Hope this helps!

[rala]

Thank you  you answer while I was  including scroll Trigger in the JS panel🙈 but why at some point the  astronaut  disappear from the viewport I want it to always appear for the user while he is scrolling.

[Cassie]

I'm afraid that's not going to be a super easy thing to accomplish - as the path isn't a straight line the distance the astronaut travels down the y axis won't be consistent. The astronaut may travel 'slower' down a straight section and 'faster' down a more curved section.

This thread is a bit of a rabbithole but if you want to achieve this it's a good place to start.
 

If you don't need it to be perfect I would probably play around with different easing curves and start and end values.