Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
explorerzip

Modifiers Plugin for Infinite Image Carousel

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 @explorerzip,

 

Welcome to GreenSock Forums.

 

Boxes without Left (CSS line 37) ...  Is NEXT forward ?

 

See the Pen YxZoYB by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

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

22 minutes ago, explorerzip said:

is empty for a split second.

 

Hi,

 

If you reduce the timing from 0.25 to 0 (line 11 and 26) it should be ok.

Sorry - that´s no correct ...

 

 

Link to comment
Share on other sites

Thanks for the reply, but I can't change the timing from 0.25 to 0 because that would eliminate the animation of the boxes.

Link to comment
Share on other sites

Hi @explorerzip,

 

Sorry, it is not the timing. It must be the position of #boxes.

 

But it is to late for me today ...

 

Hopefully one of the experts will have an eye on this.

 

Best regards

Mikel

Link to comment
Share on other sites

Hi,

 

and heureka.

 

The with of wrapper should be 50px as in the original:

 

See the Pen JyWgZP by mikeK (@mikeK) on CodePen

 

Best regards 

Mikel

 

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

Hi @Carl,

 

Thanks for your support. A really hard nut.

 

This construct is super, ideal for many applications.

 

Best regards

Mikel

  • Like 2
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...

This is really interesting.

 

How would you revise the above so that the animation (in vanilla JS) didn't animate boxWidth at a time? Instead it smooth scrolled similar to the mouseover on:

 

See the Pen OKMYOL by nolimit966 (@nolimit966) on CodePen

Link to comment
Share on other sites

Hey @nolimit966

 

One way to smooth scroll on button hover would be to have the boxes animate the full wrapWidth on hover, binding the direction to each button. Then on mouseleave you kill the tweens. 

 

See the Pen OKNadm?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

This has been super helpful!

 

I have just managed to finish building a infinite carousel which auto scrolls when you navigate left and right using ScrollMagic + GSAP.

 

See the Pen zgBxwO by nolimit966 (@nolimit966) on CodePen

 

Still a little tidying up to do but you get the jist of it :-)

 

  • Like 3
Link to comment
Share on other sites

  • 5 months later...
On 8/10/2017 at 10:04 AM, OSUblake said:

Another variation. This will let you interrupt the animation.

 

How could I create a ".activate div" to change attributes with gsap?

Link to comment
Share on other sites

  • 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

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

 

But here's another way.

 

See the Pen 1e13ae4d1583c9a7157b46b995345872 by osublake (@osublake) on CodePen

 

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.

  • Like 4
Link to comment
Share on other sites

@ZachSaucier @OSUblake Thank you both so much!

 

I was trying to figure myself why they weren't snapping and thought it had something to do with the updateProgress function.

 

Blake, very elegant code! Zach, thank you again for the quick response this morning and help.

  • Like 1
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

1 hour ago, Nickicool said:

Why can't I make a fork of this pen?

It's a private pen, so it doesn't allow forking. You can copy and paste the code from it. Please give attribution.

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