Calculating progress on autoplaying looping draggable slider

[mitchellcliftonbarton]

I built this little slider based off of the codepen below, and have added a few tweaks.

 

See the Pen ZOgGXB by osublake (@osublake) on CodePen

 

The slider starts automatically, and then on mouseenter/mouseleave the animations pauses or plays. Once paused, you can drag through the carousel as you please, until you mouseleave again at which point the slider will resume playing from where you left off. 

 

The only problem I am running into is figuring out the actual progress value once I start dragging. I figured I would have to grab the current progress, and then add the dragging progress to it, but this results in some crazy dragging stuff. 

 

Any ideas on how I can seamlessly maintain the correct progress value between the autoplay and the dragging?

 

See the Pen mdwJMbo by mitchellcliftonbarton (@mitchellcliftonbarton) on CodePen

[OSUblake]

Welcome the forums @mitchellcliftonbarton

 

Have you checked out the helper functions? There's a draggable demo in there that you should be able to modify for that. Notice how it returns a timeline that you can control.

 

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

 

[mitchellcliftonbarton]

@OSUblake Wow this is amazing! Worked like a charm!

[Krause]

Is it possible to have this functionality added onto an infinitely looping marquee where the draggable function will just "animate" the timescale/progress/something that will gradually increase speed of the marquee and then gradually go back to initial speed?

 

I've been trying to achieve this for quite a while now and though to look for assistance—thanks!

[GreenSock]

Sure, something like that is doable but it's way beyond the free help we can offer in these forums. It'd take quite a bit of custom logic to wire up but as far as I can tell it should be possible. Feel free to contact us if you'd like to explore paid consulting services. All the basic mechanics should be in that demo that Blake posted earlier - it's just a matter of tweaking that. Here's a fork that's a few steps in that direction: 

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

[August Devices]

On 8/27/2021 at 2:09 AM, mitchellcliftonbarton said:

I built this little slider based off of the codepen below, and have added a few tweaks.

 

 

 

 

The slider starts automatically, and then on mouseenter/mouseleave the animations pauses or plays. Once paused, you can drag through the carousel as you please, until you mouseleave again at which point the slider will resume playing from where you left off. 

 

The only problem I am running into is figuring out the actual progress value once I start dragging. I figured I would have to grab the current progress, and then add the dragging progress to it, but this results in some crazy dragging stuff. 

 

Any ideas on how I can seamlessly maintain the correct progress value between the autoplay and the dragging?

 

Need this Right <-- Left? what can i do?

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi @August Devices,

 

Is really unclear what you're asking for, so my best guess is that you may be looking for the reverse config option:

const loop = horizontalLoop(items, {
  reverse: true,
});

Happy Tweening!

[GreenSock]

Just to clarify, it's reversed: true, not reverse: true 🙂

[August Devices]

15 hours ago, Rodrigo said:

Hi @August Devices,

 

Is really unclear what you're asking for, so my best guess is that you may be looking for the reverse config option:

const loop = horizontalLoop(items, {
  reverse: true,
});

Happy Tweening!

Thank you got Quick help

When mouse hover animation pause and mouse leave play?

[Rodrigo]

Hi @August Devices,

 

Is super simple, just use:

const loop = horizontalLoop(elements, {
  repeat: -1,
});

wrapper.addEventListener("mouseenter", () => loop.pause());
wrapper.addEventListener("mouseleave", () => loop.play());

Here is a simple demo:

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

 

Happy Tweening!