artvera Posted April 8 Share Posted April 8 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted April 8 Share Posted April 8 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! Link to comment Share on other sites More sharing options...
artvera Posted April 8 Author Share Posted April 8 @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 🤔 Link to comment Share on other sites More sharing options...
mvaneijgen Posted April 8 Share Posted April 8 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. Link to comment Share on other sites More sharing options...
artvera Posted April 8 Author Share Posted April 8 (edited) @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 by artvera English trad Link to comment Share on other sites More sharing options...
artvera Posted April 8 Author Share Posted April 8 @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! Link to comment Share on other sites More sharing options...
Rodrigo Posted April 8 Share Posted April 8 Hi, Maybe this demo can help: See the Pen dyQdNEV by GreenSock (@GreenSock) on CodePen Happy Tweening! Link to comment Share on other sites More sharing options...
artvera Posted April 9 Author Share Posted April 9 @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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now