Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Victor Work

Inconsistency between Draggable, ScrollTo & Timeline

Recommended Posts

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

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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 by Dipscom
Translating
  • Like 1
Link to comment
Share on other sites

Thanks, @sahil.  Great job!

  • Like 1
Link to comment
Share on other sites

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

 

 

  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×