ScrollTrigger MotionPath question

[jonso100]

Hi

New to GSAP and I'm now doubting my approach to the animation I want to achieve.

So I took the "Animate Path on Scroll - ScrollTrigger" (

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

) demo as my starting point and modified it to the attached codePen.

The issue is I want the scroll down the page to stop during the horizontal part of the path but I'm not sure how to do it. It's made me think that perhaps i should be using three separate animations, 1 for the down, 1 for the across and then a third for the next down part.

Any pointers gratefully received!

 

See the Pen poOMMXz by jonso100 (@jonso100) on CodePen

[GreenSock]

9 hours ago, jonso100 said:

The issue is I want the scroll down the page to stop during the horizontal part of the path but I'm not sure how to do it. It's made me think that perhaps i should be using three separate animations, 1 for the down, 1 for the across and then a third for the next down part.

Are you saying you want to pin the element, but ONLY when the thing traveling down the motion path is in the horizontal part? Or are you trying to keep the thing traveling on the path in the viewport, adjusting its speed accordingly? 

[jonso100]

I think the second one? 

Sorry to be vague but what I want to achieve is something seen in the first white background/ second dark background sections here: https://pixiethink.com/

 

So my idea is to have a page of say 6 sections, different bg colours for each.

The path would start on the left of section one and the ball would follow it.

At the bottom of section 1 there'd be a horizontal path, taking the ball over to the right side of section 2. And like the pixie website, the scroll down would stop and wait for the ball to transition to the other side. Then the scroll down would continue.

Pattern would then repeat at the bottom of each section, a reverse horizontal path taking the ball to the other side.

 

I hope that helps explain it. I think my problem is that I'm getting confused as to what can be done with motion paths, whether this can be done with one or will it need multiples.

[mvaneijgen]

Hi @jonso100 the example you shared doesn't so much pin the scroll when it goes horizontal, but more it pins a container which has a horizontal line. It also splits the path in to multiple sections, eg each section has its own path. I can't see how you could do this with one big path. (definitely not when the screen size changes and on smaller screens the content becomes much longer then on larger screens)

 

My advise would be start building out some demo's. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

I would try and recreate the example you shared, so each section has its own path and have the dot follow the path of that particular section. I think this could work if you set up some rules for your self where the path always starts and begins somewhere in the middle (or some other location), but that way you can create paths that do something weird, but you're but going to the next section will always start from a fixed point. Hope it helps and happy tweening! 

[jonso100]

Hi @mvaneijgen thanks for the reply and the suggestions, I'll let you know how I get on!