Jump to content
Search Community

Reverse carousel direction on scroll

AntonioNB4 test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts



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:



Here is a simple example of this approach:

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


Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites



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!

Link to comment
Share on other sites

  • Solution



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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...