Jump to content
Search Community

Modifiers Plugin for Infinite Image Carousel

explorerzip test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm trying to make an infinite image carousel that will be part of a rich-media banner ad. The idea is to have the images infinite scroll in both directions with user controls for Next and Previous. The area marked in red would be visible area of the ad.

 

I leveraged the pen from the Modifiers plugin. I got the Next button to work, but the Previous button is not quite as I expected. The Previous moves all the "box" divs to the left (as it should), but they end up outside the red area.

 

The issue is definitely with the bold line below, but I'm not sure how to fix it. 

 

function prevButtonClick() {
        document.getElementById(prevButton)
        console.log("Mouse click(" + this.id + ")");
      if (!TweenMax.isTweening(".box") ){
        TweenMax.to(".box", 0.25, {
            ease: Linear.easeNone,
            x: "-=50",
            modifiers: {
                x: function(x) {
                    return x % 500; This line has to be the culprit. I cannot change this number because it will change the number of divs inside the "boxes" class
                }
            }
        });
      }
    }

See the Pen WEppOM by explorerzip (@explorerzip) on CodePen

Link to comment
Share on other sites

Hi Mike

 

Thanks for the reply. Yes the Next button is considered "Forward."

 

I omitted the left property for the .boxes class just to experiment.

 

I don't see any difference between your code and my code? There is a slight difference with your version in that when I click the Next or Previous button past a certain point, the red box is empty for a split second.

Link to comment
Share on other sites

That's a lot closer to what I'm looking to accomplish, but there still is a brief glimpse of the grey wrapper container when the boxes move outside of the red box. I'll keep playing around and see if I can get it closer to what I am looking for. 

 

Thanks so much for your help though!

Link to comment
Share on other sites

Thanks for the demo. 

 

This is a little bit tricky and something similar had me stumped awhile ago. 

Thankfully, @OSUblake shared his ModifiersPlugin Helper Functions post awhile ago.

In there he has a wrap() function that supports a negative minimum value.

wrap(500, -100, 500); // => -100
function wrap(value, min, max) {
  var v = value - min;
  var r = max - min;
  return ((r + v % r) % r) + min;
}

 

So to make your demo work in both directions you need to wrap values between -50 and 450. I also removed the left position from the boxes div (i think you had it offset by 50px or something).

 

Take a look here:

 

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

 

  • Like 6
Link to comment
Share on other sites

Thanks Carl for the input and for making the initial demo for me to copy from :D If I'm reading your code correctly, does the "wrap" function contain the movement of the "boxes" class between -50 and 450 or any 2 numbers?

 

Thanks again for your help and for all your wonderful videos. I'll update my code with actual images and post it up in the forums for everyone's benefit.

  • Like 3
Link to comment
Share on other sites

You're welcome.

 

The wrap() function can take in any 3 numbers: the number you want to wrap, the minimum value, and a max value.

 

I am calling the wrap() function inside the ModifersPlugin properties like 

 

modifiers: {
          x: function(x) {
             return wrap(x, -50, 450)
          }
        }

 

So, yes movement will be constrained between -50 and 450. 

You could definitely use any 2 numbers you want but I don't think they will give the desired results. 

 

 

 

  • Like 3
Link to comment
Share on other sites

I just posted this demo in another thread. Yes, it involves dragging, but it could certainly be adapted for previous and next buttons. Instead of creating a modifiers based tween on every click, you would tween the progress of a timeline. I might make an example of how to do that later tonight.

 

See the Pen ZOgGXB?editors=0010 by osublake (@osublake) on CodePen

 

 

  • Like 6
Link to comment
Share on other sites

  • 1 year later...
  • 5 months later...
  • 1 month later...

@ZachSaucier thank you so much for the latest codepen! I have been trying for a while to implement this carousel and Blake's carousel in Vanilla JS with gsap v3 and your code really helped. Unfortunately I am stuck again and I was hoping you can help. If you try the codepen. When you first load into it you can Drag to the right (1, 2, 3 -> 4, 5, 6) and I am not sure why. Any help will be greatly appreciated.

 

See the Pen PowgKwo by jomartinez27 (@jomartinez27) on CodePen

 

 

Link to comment
Share on other sites

  • 9 months later...
On 3/6/2020 at 9:20 PM, OSUblake said:

@ZachSaucier your demo doesn't seem to snap correctly after dragging.

 

But here's another way.

 

 

 

 

Also, I would got rid of setting type: "x" on the Draggable as it will prevent dragging if you initially start dragging on the y axis, but then change direction.

 

Why can't I make a fork of this pen? I would like to save it to my pens collection with a more understandable title than "Untitled"...

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...