Motion path plugin

[leGenti]

Hi everyone,

 

I'm a noob who just started programming a few months ago, so i will probably ask some stupid questions. Sorry in advance.

 

I followed a code from code pen where an object follows a path on scroll. I made my own path on Figma using the pen tool.

I want to make  a golfbal that follows a path and falls in a hole.

I'm trying to center the ball (it should stay centered on the screen) on scroll and I want to animate it slower. I also want it to fall in a hole, so it can't scroll back up when someone passes the path length.

 

I can't find a proper explanation anywhere or maybe i'm not looking correctly.

It would be awesome if someone can help!

 

Edit: I know a golfball doesn't have this trajectory, but my boss doesn't want an almost straight line

 

Thanks in advance,

Gentian

See the Pen VwjZVyd by legenti (@legenti) on CodePen

[ZachSaucier]

Hey leGenti.

 

The first issue is that your path is twice as long as it needs to be - it goes all the way down then back up! Definitely get rid of the second half.

 

56 minutes ago, leGenti said:

I'm trying to center the ball (it should stay centered on the screen) on scroll

This is determined by the sizing of your SVG, the desired effect that you want, and the distance of your ScrollTrigger. I would recommend that you size the SVG based on the viewport size.

 

59 minutes ago, leGenti said:

I want to animate it slower

When you use scrub the speed is determined solely by the amount of animation that needs to happen and the distance of the ScrollTrigger (end position minus the start position). So if you want it to be slower you probably should pin the SVG (or a container of it) and then change the end distance to be something longer.

 

1 hour ago, leGenti said:

I also want it to fall in a hole, so it can't scroll back up when someone passes the path length.

To do this I recommend killing the ScrollTrigger once it completes.

[leGenti]

Hi Zach,

 

Thanks for the fast response!

I understand like 25% of what you have written, but I'm gonna try my best!

 

 

[leGenti]

19 hours ago, ZachSaucier said:

Hey leGenti.

 

The first issue is that your path is twice as long as it needs to be - it goes all the way down then back up! Definitely get rid of the second half.

 

This is determined by the sizing of your SVG, the desired effect that you want, and the distance of your ScrollTrigger. I would recommend that you size the SVG based on the viewport size.

 

When you use scrub the speed is determined solely by the amount of animation that needs to happen and the distance of the ScrollTrigger (end position minus the start position). So if you want it to be slower you probably should pin the SVG (or a container of it) and then change the end distance to be something longer.

 

To do this I recommend killing the ScrollTrigger once it completes.

Hi Zach, 

 

after reading your message carefully it made alot of sense, thanks!

 

I have one more question: Is there any solution to easing the ball? I don't know to explain it very well. But i want it to run smoother over the path. I've tried changing the 'ease: "none"' to 'ease: easeOutCubic" but i don't see any difference. 

 

What I try to do is to make the ball run smoother over the path on scroll and not to stop suddenly after each scroll. Like when you hit a ball in real life, it doesn't stop suddenly but it slows down smoothly.

 

Thanks in advance, 

 

Gentian

[mikel]

Hey @leGenti,

 

If you would use GSAP ScrollTrigger, you could benefit from the scrub function.

 

See the Pen XWdwdeR?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

[leGenti]

7 minutes ago, mikel said:

Hey @leGenti,

 

If you would use GSAP ScrollTrigger, you could benefit from the scrub function.

 

 

 

 

Happy scrolling ...

Mikel

 

Hey Mikel,

 

Thanks for this awesome example, this is exactly what i was looking for!

 

So if I understand correctly, I have to use the Gsap scrolltrigger cdn and register it. Then I have to apply it like in my example below?

 

var tween = gsap.to("#rec", {
  duration: 5,
  paused: true,
  ease: "none",
  motionPath: {
    path: "#path",
    align: "#path",
    autoRotate: true,
    alignOrigin: [0.5, 0.5]
  },

 scrollTrigger: {
    trigger: "#path",
    scrub:2

}  
}).pause(0.001);

 

Greetz,

Gentian

[mikel]

Hey @leGenti,

 

Please take a look at the DOCS of GSAP ScrollTrigger and my example.
Then you will understand how the structure for a ScrollTrigger works.