[Motion path plugin]

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

[Motion path plugin]

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

[Motion path plugin]

Hi Zach,

 

Thanks for the fast response!

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

 

 

[Five years of GSAP = motiontricks.com]

I'm sooo captivated by the header of your website. It's such a cool animation how it's all moving and it collects when hovering over a nav-link.

Do you have a tutorial on how it's done?

I just started programming and I hope i will, someday, be able to do 1/10 of what you can do.

Such a big inspiration!

 

(Sorry for the bad English)

 

Greetz,

 

Gentian

[Motion path plugin]

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