Slider auto scrolling + draggable + scrollbar

[artvera]

Hello everyone,

 

I need to create a timeline that must adhere to the following behaviors:
 

- Both the timeline and the slider must scroll automatically
- The user should be able to take control of the scrolling with the slider
- When the user finishes dragging the slider, the timeline AND the slider should resume their automatic scrolling

Today, I have an issue. Everything works well in auto-scroll, but as soon as I drag the slider, it stays frozen and doesn't start moving again.
 

I don't understand why, onDragEnd, my autoScroll method restarts fine but the .to related to the slider doesn't ?
 

If anyone has a solution, I'm all ears,
 

Thanks in advance.

=== FRENCH VERSION ===

Bonjour à tous,

Je dois réaliser une frise chronologique qui doit respecter les comportements suivants :

- La frise et le curseur doivent défiler automatiquement
- L'utilisateur a la possibilité de prendre la main sur le scroll avec le curseur
- Quand l'utilisateur a terminé de drag le curseur, la frise ET le curseur reprennent leur défilement automatique

Aujourd'hui j'ai un soucis. Tout se passe bien en scroll auto, mais dès que je drag le curseur ce dernier reste figé en ne repars pas

Je ne comprends pas pourquoi onDragEnd ma méthode autoScroll se relance bien mais pas le .to lié au curseur ?

Si quelqu'un a une solution, je suis preneur,

Merci par avance 

See the Pen qBwooYY by Arthur-Vera (@Arthur-Vera) on CodePen.

[mvaneijgen]

I think what I would do in this case is: have an element that is on top of your red dot, which is hidden (transparent) and a bit bigger than the dot it self (because clicking on the dot while it is moving is really hard). This will allow you to update the whole animation as one piece, the issue you're having now is that you are updating the red dot while it is also part of an animation, this is causing conflicts which breaks the animation while you release it. 

 

So to reiterate, create a an extra element which is invisible which you use for the dragging and update your whole timeline including the red dot. 

 

I think this will fix your issue. Hope it helps and happy tweening! 

[artvera]

@mvaneijgen Thank you for your response.
 

I'm not quite sure I understand. Do you think I should create an element over the red dot (that follows the red dot?) but I don't see how that would change anything other than extending the grab area of the red dot ?

[mvaneijgen]

Well you're animating the x property of the this.grabCursor element, but dragable is also updating the x property to, you have two elements fighting for control of your element both trying to animate x. This will cause conflicts, by creating an extra element it will allow you to have all the animations to target their own elements and this will not cause the conflicts you're having trouble with now. 
 

[artvera]

@mvaneijgen I see the idea but I think it's not quite there yet. When you say to create an additional element, should it be related to grabCursor? I tried something here:

See the Pen zYXWLMp by Arthur-Vera (@Arthur-Vera) on CodePen.

 

Edited April 8, 2024 by artvera
English trad

[artvera]

@mvaneijgen Thank you very much for your time and advice, I finally chose to use SwiperJS, as I no longer had enough time to further debug this timeline. Thank you again, see you soon on the forum!

 

[Rodrigo]

Hi,

 

Maybe this demo can help:

See the Pen dyQdNEV by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!

[artvera]

@Rodrigo Thank you, that looks interesting, I'll look at how I can adapt this demo, I'll get back to you as soon as possible