Official horizontalLoop() demo - Drag Bugs

[15850_1494126609]

Hello,

i have tried the official codepen demo with the horizontalLoop:  

Thanks for this awesome slider. 

 

But I run in some troubles with the dragging. I could fix some problems by myself but with 1 problem i have my troubles

 

Scenario: 

- Open the page and drag much, so the slider its moving. 

- When it comes nearly to the end (but it has not stopped yet) please press the active button with the white boarders.

- It now jumps a lot.

 

Do you know why? Thanks a lot! 

 

 

 

Other bugs i could solve (but its ugly 😞

 

Scenario 1: 

- Open the page and drag just some pixels on the active button (Button number3) and release the mouse.

- Then click a few times on the button 3. 

- Now it jumps some boxes.

I tried to fix it in the "toIndex" function before line 150. It works better. 

vars.overwrite = true;
if (index === curIndex) { return; }

curIndex = newIndex;
gsap.killTweensOf(proxy);
return tl.tweenTo(time, vars);

 

Scenario 2:

- Drag a lot, so that the slider is moving.

- While the slider is moving please press the "wrapper" (the grey lines above or below the boxes) 

- Now it jumps a loooot. 

 

I fixed this with adding a new var isNowDragging (true when the user drags) and change line 182. Seems to work now.

if (!isNowDragging) {gsap.set(proxy, {x: startProgress / -ratio});}

 

Thanks a lot for your help.

 

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

[GreenSock]

That was a performance optimization where we skipped synchronizing the current index value with the position during the inertia-based animation (and then we synchronized it when that animation completes). So if you clicked mid-inertia-animation, it was just using the index that was "current" at the time you released the mouse/pointer/touch. I have updated the helper function to handle this scenario correctly now. Does it work better now? 

 

See the Pen gOvvJee?editors=0110 by GreenSock (@GreenSock) on CodePen

[15850_1494126609]

Thanks for your changes Jack / @GreenSock. Nice new variable "indexIsDirty" 😀 

 

I have tried to implement it, but unfortunally nothing has changed. 

 

Hot to reproduce it:

 

- please open your changed codepen.

- drag a bit.

- during the movement please click on the active bar (with white corners). It now jumps.

 

 

Other (fixed) issue:

- during the movement please click on the wrapper (top and bottom grey lines). It now jumps a lot.

it seems not important because the wrapper is so small. But in my case its very big and very annoying. 

i fixed this on line 186:

if (!draggable.isThrowing) {gsap.set(proxy, {x: startProgress / -ratio})}

 

Thanks a lot for your help.

 

[GreenSock]

Oh, sorry, I didn't realize that's what you were describing. Yeah, that's a simple fix (don't wrap if the index didn't change). Done. ✅

 

Better? 

 

By the way, that's a clever avatar. Since AS2? Wow. 💚

[15850_1494126609]

Thanks a lot Jack!!

 

Works much better.

After a click on the wrapper (grey bars) its still very messy . I fixed it with the code in my post bevor, but sometimes its jumping too and i dont know why. But for now i can work with that and debug later, thanks again for your quick help!

 

About AS2: Yeah I was a flash developer in a big company and did a lot with your great tweens, it was so helpful. But after the flash disaster i was a designer and a content producer (photo, video). Now i am working again with a lot of JS. Good old Flash days 😂

[GreenSock]

23 hours ago, 15850_1494126609 said:

After a click on the wrapper (grey bars) its still very messy . I fixed it with the code in my post bevor, but sometimes its jumping too and i dont know why.

That's a tricky edge case related to snapping and the correction we do in the onPressInit which could be a large change, making the velocity very high. I added some logic to sense that condition and correct for it. Better? 

See the Pen gOvvJee?editors=0110 by GreenSock (@GreenSock) on CodePen

[15850_1494126609]

Thanks, nice Try Jack with the requestAnimationFrame: But if you return y then it stops immediately and dont finish the animation to the center image. 

How to check it:

- drag the slider 

- during the animation please click the top or bottom grey bar. 

 

But as i said before, i can work with that now, its not a critical bug. Thanks a lot for your great help so far @GreenSock! I can imagine you have better things to do  

[GreenSock]

Yeah, that's probably because it was about 4am when I did that and my brain was 70% asleep

 

Here's an update that I believe resolves it:

See the Pen gOvvJee?editors=0110 by GreenSock (@GreenSock) on CodePen