How to add mouse wheel scroll to the seamless vertical loop example working with draggable

[nvgrd]

I'm trying to add the ability to do normal mouse scrolling to this example (). I have tried it with the wheel event but it is very abrupt and does not work well with the draggable. Is there a way to do it with the same behavior and smoothness as the draggable?

 

Thanks in advance!

See the Pen poBRqPW by iacus (@iacus) on CodePen

[Rodrigo]

Hi @nvgrd and welcome to the GSAP Forums!

 

You can use the Observer Plugin:

https://gsap.com/docs/v3/Plugins/Observer/

 

Also the wrap utility method with the loop's toIndex method should provide basically what you need:

https://gsap.com/docs/v3/GSAP/UtilityMethods/wrap()

 

const boxes = gsap.utils.toArray("#wheel_1 .box").length - 1;
let currentIndex = 0;

const loopUpdater = (e) => {
  const modifier = e.deltaY > 0 ? -2 : 2;
  const target = gsap.utils.wrap(0, boxes, currentIndex + modifier);
  currentIndex = target;
  wheel1.toIndex(target, {duration: 1, revolutions: 0, ease: "power2.inOut"});
};

Observer.create({
  target: ".row",
  type: "wheel",
  onUp: loopUpdater,
  onDown: loopUpdater,
});

Here is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!

[nvgrd]

Thanks Rodrigo for the help!

 

Your solution works fine for navigating to some index. But I'm looking for free movement, similar to touch behavior.

 

I was trying to do it with your code but I can't do it. Is it possible to do it with the progress function of the timeline as well as within the draggable to achieve free and loop scrolling at the same time?

 

Thanks!

[Rodrigo]

Hi,

 

Maybe something like this:

let wheel1 = verticalLoop("#wheel_1 .box", {
  repeat: -1,
  center: true,
  draggable: true, // I'm just being fancy
  inertia: false // even fancier
});
wheel1.timeScale(0);

const boxes = gsap.utils.toArray("#wheel_1 .box").length - 1;
let tl;

const loopUpdater = (e) => {
  tl && tl.kill();
  const modifier = e.deltaY > 0 ? 5 : -5;
  tl = gsap.timeline()
  .to(wheel1, { timeScale: modifier, duration: 0.25, ease: "power1.in" })
  .to(wheel1, { timeScale: 0, duration: 0.5, ease: "power2.out" }, "+=1");
};

Observer.create({
  target: ".row",
  type: "wheel",
  onUp: loopUpdater,
  onDown: loopUpdater
});

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

 

Hopefully this helps.

Happy Tweening!

[nvgrd]

Hi Rodrigo,

 

thanks for your help. I have finally come to this solution:

See the Pen NWmLZMM by iacus (@iacus) on CodePen