Vertical loop on scroll

[jackkemm]

Hi there,

 

I was wondering the best way to tie this helper function up to ScrollTrigger and use the scroll velocity to scroll through/update the progress in the column?

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

 

I have attached a minimal demo using gsap.quickTo() but sadly isn't tied to the scroll correctly. Once I have worked this out i'm going to hopefully hook into the scroll direction so I can play it in both directions. But the first step would be making it work 😅

 

Thanks,

Jack

See the Pen gOBPRvz??editors=1010 by jackkemm (@jackkemm) on CodePen

[Rodrigo]

Hey Jack,

 

There are a couple of options here.

 

One is to create the loops with a specific number of repeats and scrub them with ScrollTrigger. Is important that in this particular approach you can't use an endless loop, because you'll be tying the progress of an infinite instance (something that last forever) to a finite amount of pixels and that's just not going to happen.

 

The other approach is to toggle the direction of the loops based on the direction of the scroll:

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

 

Hopefully this helps.

Happy Tweening!

[jackkemm]

Hey @Rodrigo,

 

That's perfect to get me on the right track. The endless loop here is needed so this is great.

 

The only thing I need to do now is to stop it when the scrolling stops 👍 So only move the columns in the direction of scroll when scrolling but I can have a play hopefully crack it.

 

Thanks,

Jack

[Rodrigo]

Hi,

 

I forked the codepen to do that. Is just a matter of JS logic:

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

 

Hopefully this helps.

Happy Tweening!

[jackkemm]

Hey @Rodrigo,

 

Thanks for the update. Sadly it only seems to scroll in one direction mainly, it will randomly go in the opposite direction when scrolling up.

 

I made a tweak to the line below to make sure the currentDirection was being used to make sure the columns went the opposite direction when scrolling up/down:

// Changed this line
currentScale = (i % 2 ? 1 : -1) * -1;

// To this line
currentScale = (i % 2 ? (currentDirection * -1) : currentDirection);

 

Thanks a lot for your help @Rodrigo.

 

Thanks,
Jack