Add auto scroll Draggable

[FLYPILOT]

Hi guys, I've built this slider, including captions and bullet points, but I'm struggling to add an autoplay to this and keep all math I've build so far. Could you guys please help?

See the Pen NWObZwb by jo-o-luiz-de-figueiredo-magalh-es (@jo-o-luiz-de-figueiredo-magalh-es) on CodePen

[Cassie]

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?

https://greensock.com/docs/v3/HelperFunctions#loop

 

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");
    element.classList.add("active");
    activeElement = element;
  }
});

 

[FLYPILOT]

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.

[Rodrigo]

Hi,

 

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.

https://greensock.com/docs/v3/GSAP/gsap.delayedCall()

 

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

Happy Tweening!

[FLYPILOT]

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,

[Rodrigo]

Hi,

 

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:

https://greensock.com/docs/v3/Plugins/Draggable/update()

 

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

// Later on your code
myDraggable[0].update();

Hopefully this helps.

Happy Tweening!

[FLYPILOT]

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.

[FLYPILOT]

Hey @Rodrigo I've updated the example and added a autoplay, however, now I'm with a small bug when the autoplay is running and when I try to do a manual drag, the slider jumps

 

[GreenSock]

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() {
  gsap.killTweensOf(animation);
  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

[FLYPILOT]

@GreenSock Thanks a lot, this really worked!