Changing a drag tween mid tween

[dkolb5]

Hi All,

My question is when the slider is mid drag and you press one of the next or previous buttons. The slider jerks for a second if the drag isn't completed.

 

I think this is due to:

gsap.killTweensOf(slider);

 

Is there a better way to strop the current drag and switch it to a different tween on click of the next and previous arrows? 

See the Pen PoZVYLY by bws_dan (@bws_dan) on CodePen

[GreenSock]

I think the problem is that you're doing this: 

let tl = gsap.timeline();
tl.killTweensOf([slider, proxy]);

You're creating a new [empty] timeline and then telling it to find all the existing tweens INSIDE that [empty] timeline and kill them. Of course there won't be any in there yet, so that code does nothing. I think you meant to do this: 

gsap.killTweensOf([slider, proxy]);

Which will search the entire global timeline. 

 

I noticed a bunch of other issues but sifting through all the code and explaining it all is more of a custom consulting project than a forums question. We're happy to answer GSAP-specific questions about the API and functionality but unfortunately we just don't have the resources to provide free custom consulting like that. 

 

I assume this is closer to what you wanted, right?:

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

 

Happy tweening!

[dkolb5]

Hi Jack,

 

Stoping the global timeline makes may more sense than an empty one. And sure I totally understand only helping debugging GSAP related items. 

 

Thanks for taking a look!