Inconsistency between Draggable, ScrollTo & Timeline

[Victor Work]

Hello, I'm trying to create a Draggable slide, using Timeline and ScrollTo. I want it to detect Swiper to the right it rolls to the next target, and when it rolls to the left it comes back, but when it rolls the times it passes the point and it locks. I know qye maybe this is not the best way to solve this, but within my programming level was what I got.

See the Pen aLaZWj by Noturnoo (@Noturnoo) on CodePen

[GreenSock]

Hm, I read your question a few times and I'm still not quite sure what the question is. Would you mind elaborating a bit? Are you asking about the best way to rebuild that codepen so that it doesn't use a timeline and ScrollToPlugin? Was there a particular functionality you want but can't achieve? 

[Victor Work]

Hi, sorry for English, I'm using the translator.

What I need is to create a draggable that checks the drag direction. If it is to the right it pulls the next slide, if it goes to the left it goes to the previous slide.
I tried doing with ScrollTo, but it is not working properly.

Can you understand?

[Sahil]

You can use this.getDirection(); to determine direction.

[Victor Work]

Hi Sahil again, thanks for the support in the other question, but I'm still not an expert in javascript and I'm trying on my pace, however I caught on in this part, draggable can understand the direction but in the scrollto is not stopping in the correct place after some interactions.
This is the problem.

[Carl]

Nice work on getting the swipe direction in there as Sahil suggests. 

Unfortunately I think the way things are setup is going to eventually just cause more and more problems like this.

You have a tweens that happen when you click the buttons, tweens and a timeline and Draggable all sort of fighting for control of the scrollTo value. At some point there is going to be a conflict that either ends up in tweens getting overwritten (killed) or the thing flying off in some unexpected direction.

 

I really can't go through it all and show you how to set it all up, because its not exactly simple (or quick) to do it all the right way. However, Blake has a demo with all this stuff figured out, plus seamless looping and autoplay. The only thing he doesn't have is navigation buttons for each slide.

 

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

 

 

Or you may want to start with something simpler and try to add drag controls. @Diaco has some great examples

 

See the Pen yYradO by MAW (@MAW) on CodePen

 

See the Pen XmozON by MAW (@MAW) on CodePen

 

 

vertical drag

 

See the Pen dopxrV by MAW (@MAW) on CodePen

 

[Sahil]

Following is the one way you can do it.

 

See the Pen EwGGwL?editors=0111 by Sahil89 (@Sahil89) on CodePen

 

@Carl The first pen by Blake, it is still incomplete. He had created to answer my question but it behaves odd on resize and I wasn't able to fix it either. Just letting you know.

[Victor Work]

Obrigado @ Carl , mais acredito que o @ Sahil ,  está perto do resultado que eu preciso. Por usar uma Linha do tempo, posso atribuir várias animações em slide atual. (Thanks Sahil)

Exemplo: Quando o slide 2 está ativo, inserindo um texto animado 

 

-----

Thanks @Carl, but I believe @Sahil is closer to the result I am after. Using a timeline I can add several animations in the current slide. (Thanks Sahil)

Example: When slide 2 is active, inserting an animated text

Edited October 18, 2017 by Dipscom
Translating

[Carl]

Thanks, @sahil.  Great job!

[OSUblake]

On 10/18/2017 at 9:20 AM, Sahil said:

The first pen by Blake, it is still incomplete. He had created to answer my question but it behaves odd on resize and I wasn't able to fix it either. Just letting you know.

 

See if you notice any problems with the resize now.

 

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

 

 

[Sahil]

No more, it is perfect. Another issue though, slideDelay and slideDuration are overlapping. If you set slideDelay and slideDuration same, slide pauses for brief moment only. It can be fixed easily but just letting you know. Thanks.

 

Unfortunately I wasn't able to use it and I went with what I had done at the time. Still this is perfect starting point as there are always questions on sliders.