Reverse carousel direction on scroll

[AntonioNB4]

Hi dev,

im trying to reverse the direction of carousel on scroll, but as you can see on demo something go wrong. Where i'm going wrong ?

Regard,
Antonio.

 

See the Pen gOQwLLw by Antonio-Nocella (@Antonio-Nocella) on CodePen.

[Rodrigo]

Hi,

 

When creating endless loops with images is better to wait for all the images to be loaded before creating the loop. Also in this case the Observer Plugin is the tool to go:

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

 

Here is a simple example of this approach:

See the Pen JjeRNGz by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[AntonioNB4]

Its very helpful but I don't understand which way you are selecting the images to move ?

[Rodrigo]

Hi,

 

3 minutes ago, AntonioNB4 said:

Its very helpful but I don't understand which way you are selecting the images to move ?

I'm not sure I understand the question. Care to elaborate a bit more?

 

The core of this is here:

const observer = Observer.create({
  target: ".container",
  type: "wheel, touch",
  onChange: (self) => {
    if (self.deltaY > 0) {
      gsap.to(loop, { timeScale: 1, duration: 0.3 });
    } else {
      gsap.to(loop, { timeScale: -1, duration: 0.3 });
    }
  }
});

So when the user scrolls up or down, I get the deltaY value from the Observer instance. If the user scrolls down it goes in the original direction of the loop (left-to-right), if the user scrolls up then it goes in the opposite direction (right-to-left).

 

Happy Tweening!

[AntonioNB4]

Forgive me for having misunderstood. In the javascript of your codepen where do you select the images that initially scroll and then change direction ?

I say this because I need to adapt the code to my html content

[Rodrigo]

Hi,

 

In the endless loop function call, here:

window.addEventListener("load", () => {
  // At this point all the images are loaded, then I give the
  // helper function the selector, which is all the img tags
  // it can find. Of course you can pass a more specific selector
  const loop = horizontalLoop("img", {
    repeat: -1,
    paddingRight: 15
  });
});

Happy Tweening!