Gsap vertical infinite loop

[Sukru 6 Likes (Newbie)]

Hello, I have two endless loop animations going in different directions, but the animation on the right does not start from the top like the other one and works problematic.
Can you help me?

 

See the Pen abRBjzY by sukruemanet (@sukruemanet) on CodePen

[GreenSock 18,876 Likes (Superhero)]

You had some typos in your code, plus some logic things. There's a very robust helper function in the docs that makes this very easy: 

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

 

Is that what you're looking for? 

[Sukru 6 Likes (Newbie)]

@GreenSock thank you very much

[GreenSock 18,876 Likes (Superhero)]

Anytime. 👍

[7dots 6 Likes (Newbie)]

Hey guys,

 

Is there a way to tie the vertical loop helper function to scroll velocity or delta.y for example?

 

So having the helper function paused by default, and tapping into either of the above values to progress the timeline on scroll?

 

I have attached a demo of kind of what i'm after in terms of scroll (I don't intend to use the example for my work 😇)

See the Pen OJBxeMm?editors=0011 by jackkemm (@jackkemm) on CodePen

 

Essentially the columns would be paused, and animate in opposite directions using either of the above values to create the momentum/acceleration effect.

 

Thanks,

Jack

[GreenSock 18,876 Likes (Superhero)]

Yep, pretty much anything is possible. You're wandering into the realm of paid consulting though because it's beyond the kind of custom help we can provide for free in these forums. It looks like you sorta got it working - what exactly isn't working the way you want? 

[Rodrigo 5,885 Likes (Superhero)]

Hi,

 

Maybe the examples in this thread could provide some inspiration for what you're trying to do:

 

Hopefully this helps.

Happy Tweening!

[7dots 6 Likes (Newbie)]

Hey @GreenSock,

 

Thanks for the reply. It's effectively just the velocity and giving it a slower momentum. I noticed that doing it this way will cause the vertical loop to go backwards on itself when it reaches a point.

 

I'm going for something like this but without the auto scrolling:

See the Pen oNGEvmw by cameronknight (@cameronknight) on CodePen

 

Hey @Rodrigo,

 

That's a perfect example thanks, but for this use case i'd like to try use the velocity to give the scroll some momentum rather than using timeScale.

 

Is there any hint you can provide to get going with using velocity and progressing the vertical loop timeline at all?

 

Thanks,

Jack

[7dots 6 Likes (Newbie)]

Hey,

 

I managed to find a solution to my problem in the end in a GSAP Codepen!

 

This got me on the right tracks:

See the Pen zYPVoZV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Thanks for the help guys.

 

Thanks,

Jack