Gsap V3, Draggable, Snap, Next & Prev, Infinite Slider

[Bruno Stephen]

Hello friends.

 

I'm creating a slider and everything works fine, I still have to make some adjustments.

 

What I need to do and I can't is when manipulating by dragging the animation, use [ease: 'none'] and when clicking on the button it's [ease: 'power2.inOut'].

 

If there's anything to improve, I'm open to suggestions.

 

I thank everyone.

See the Pen JjOZGde by whoisbrux (@whoisbrux) on CodePen

[OSUblake]

Hi Whoisbrux,

 

Normally what you would do is animate a property of the animation, like the progress or time with with the ease and duration you want instead of doing play/reverse.

 

gsap.to(TL, {
  time: 0.25,
  ease: "power2.inOut"
});

 

But there's already a helper function that might help with this, which you mind useful.

 

https://greensock.com/docs/v3/HelperFunctions#loop

 

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

 

[Bruno Stephen]

Hi Blake how are you?

 

This is exactly what I wanted to seem like magic.

 

But I found a BUG if you drag it around and wait a while and then click on next or previous it gets lost and doesn't do the right thing.

 

Sometimes it cycles through 2 items instead of 1.

 

It doesn't always happen.

 

this function was very complex I could not find the error.

 

Thank you for your help!

 

See the Pen yLPEKQg by whoisbrux (@whoisbrux) on CodePen

[Bruno Stephen]

I found that problems usually occur when the last item is in the first position!

[GreenSock]

I think there was just a minor flaw in the updateIndex() function:

// OLD
tl.updateIndex = () => curIndex = Math.round(tl.progress() * (items.length - 1));

// NEW
tl.updateIndex = () => curIndex = Math.round(tl.progress() * items.length);

 

See the Pen QWOxeag?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that better? 

[Bruno Stephen]

Now it works perfectly Jack.

 

I did several tests and didn't find any bugs.

 

We just need to ensure that the user doesn't click on the buttons before [onThrowComple] is complete this generates an error.

 

Can we live with it but do we have a smart way to do it?

 

Thank you very much Jack.

[GreenSock]

43 minutes ago, Whoisbrux™ said:

We just need to ensure that the user doesn't click on the buttons before [onThrowComple] is complete this generates an error.

 

Can we live with it but do we have a smart way to do it?

 

You can just kill that tween in that case. 

 

I've updated the demo and accomplished that internally: 

See the Pen QWOxeag?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you mean?