Jump to content
Search Community

Add auto scroll Draggable

Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi there!


I'm afraid I'm at a bit of a loss of how to help here, sliders are pretty tangly logic-wise.

We have a helper function which we recommend using, maybe that will help?



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


You'd pass in different paused and repeat values in order to have it autoplay.

const loop = horizontalLoop(boxes, {
  paused: false, 
  repeat: -1,
  draggable: true, // make it draggable
  center: true, // active element is the one in the center of the container rather than th left edge
  onChange: (element, index) => { // when the active element changes, this function gets called.
    activeElement && activeElement.classList.remove("active");
    activeElement = element;


Link to comment
Share on other sites

Hey @Cassie thanks for the reply, I've seen this function around, however I'm not sure If I want to change the entire logic here, since this is already in production. Mainly for the design of the slider, that have the "different size in the middle.

Link to comment
Share on other sites



As Cassie mentions sliders can be a bit tricky, the more features they have the trickier they can become.


Unfortunately you caught me with little time to go through all your code and see how the autoplay could be implemented, but I think your project already has some parts that you can reuse for that. Basically the updateProgress method being used when you drag and throw the Draggable target. What I would try first is to use a GSAP DelayedCall instance to update some proxy and use the updateProgress method to move the slider in the auto play direction. Then you can restart the DelayedCall to rinse and repeat.



Hopefully this is enough to get you on the right track.

Happy Tweening!

Link to comment
Share on other sites

Hey @Rodrigo thanks for replying to this.

If take a look on the code, that is not functional for the autoplay part, you will see that I've been trying to use the DelayedCall and use the updateProgress. Unfortunately my issue right now is how to get the x position outside of Draggable, all my functions related to this position are relaying on the x inside the Draggable. Maybe I'm missing something here.However,

Link to comment
Share on other sites



Without a minimal demo that shows that particular issue (the one from your first post doesn't have the autoplay feature in it) is really hard for us to debug this.


The only advice I can offer with the information you provide is to run the update method on the Draggable instance:



const myDraggable = Draggable.create({ /*...*/ });

// Later on your code

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

Hey @Rodrigo thanks again.


So that's my issue, I don't have it working, but I have 2 functions that I started to create in lines 112 and 120 animateSlides() autoplay()
in animateSlides, I was trying to run a gsap animation, but it didn't worked as well.


I've updated the example with what I've so far.

Link to comment
Share on other sites

  • Solution

You need to synchronize the x position of the proxy with the progress of your animation. You also need to kill the in-progress tween of the animation/timeline as soon as you press. Use the onPressInit() so that it sets the proxy's x before the Draggable does its internal work of capturing the current position for the drag: 

onPressInit() {
  let x = animation.progress() * wrapWidth;
  gsap.set(proxy, {x: x});
  draggable.current = widthSnap(x);

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

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