Seamless horizontal scroll loop with scrub

[japgroevemaker]

Hello Greensock forum,

 

I'm using Greensock for a short while now and this is my first time on the forum. I was wondering if somebody can help me with my issue.

 

What i'm trying to achieve is an effect i saw on this website: https://durimel.io/nel. I really like the seamless scroll loop in combination with the scroll scrub. Now i guess i'm pretty far with the seamless scroll loop (used this pen as reference: 

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

), but i cant get the scrub working. scrub true; seems to work but then it scrolls way to fast, and when i'm setting scrub: 1 then it breaks completely

 

I hope somebody can help me with the scrub issue, i think i can handle the seamless loop myself but if anyone has the time to wrap his head around that then that would be a nice bonus!

 

Cheers

 

See the Pen KKyBjBw?editors=1010 by jap_groevemaker (@jap_groevemaker) on CodePen

[OSUblake]

Welcome to the forums @japgroevemaker

 

That site doesn't look like it's using scrolling for the effect. Most likely mouse wheel events.

 

I just answered a similar question using our seamless loop helper function.

 

 

[japgroevemaker]

Thanks @OSUblake for your quick reply!

 

I'v tried the loop helper function and it works very nice! But i'm still wondering if it is possible with the scrub from the Scrolltrigger?

 

Cheers!

[OSUblake]

The helper function returns a timeline, so you should be able to just hook it up to a ScrollTrigger.

 

ScrollTrigger.create({
  animation: loop,
  scrub: true,
  ...
});