Adding scroll trigger functionality to navigate through slider not working

[Caspert]

Hi,

 

I just saw the infinite slider of  GSAP, but I want to add another functionality, so when the user scrolls, the slides are snapping in view.

I added the ScrollTrigger functionality, but it seems it not working and I can't find the issue by myself.

 

So does anyone know how I can fix the issue, so the slider can also used with scroll, similar to how the prev and next buttons work?

 

// Use ScrollTrigger to control the slider with scroll
gsap.to(wrapper, {
  scrollTrigger: {
    trigger: wrapper,
    start: "top top",
    end: "bottom bottom",
    scrub: 1, // Controls the sensitivity of the scroll
  },
  onUpdate: (scrollTrigger) => {
    const progress = scrollTrigger.progress;
    const totalDuration = loop.totalDuration();
    const time = progress * totalDuration;
    loop.tweenTo(time);
  },
});

 

See the Pen bGZvKMW by Caspert (@Caspert) on CodePen

[Rodrigo]

Hi,

 

Why not use the Observer Plugin?

 

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

 

See how simple is to leverage the Horizontal Loop helper's prev and next methods?

 

Hopefully this helps.

Happy Tweening!

[Caspert]

Thank you for the response. That's a lot easier than I actually thought!
The only thing that I am seeing now is that it is really sensitive to the scroll, is there also a solution for, so it's a lot more sturdy. Something more like this example: 

See the Pen poYVREZ by Caspert (@Caspert) on CodePen

 

Can this be combined or adjusted with a property?

[Rodrigo]

Hi,

 

You can add a boolean check in order to allow one Observer callback at a time:

let isTweening = false;

// Observer instance
Observer.create({
  target: window,
  type: "wheel",
  onUp: () => {
    if (isTweening) return;
    isTweening = true;
    loop.previous({
      onComplete: () => isTweening = false,
      duration: 0.4,
      ease: "power1.inOut"
    });
  },
  onDown: () => {
    if (isTweening) return;
    isTweening = true;
    loop.next({
      onComplete: () => isTweening = false,
      duration: 0.4,
      ease: "power1.inOut"
    });
  },
});

 

Hopefully this helps.

Happy Tweening!

[Caspert]

Thank you for the updated version. The only thing what I experience now is when I scroll and let go, it will move most of the time multiple slides. But I would like to just slide one at a time. Is that also possible? 

 

Already tried to make the duration longer, but this doesn't solve the issue.

See the Pen Babxwwj by Caspert (@Caspert) on CodePen

[mvaneijgen]

You can add a delay to updating the isTweening with gsap.delayedCall(). Make sure you play with the 1 second value to get it to act like you want. Hope it helps and happy tweening! 

 

See the Pen Babxmqr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen