Draggable Slider

[dkolb5]

Hi All,

 

I'm having two issues with my current pen:

• The draggable bounds don't seem to be working correctly. I'd like them to stop at the min and max. I've tried them as a query-able element or as an object (maxX, minX). 

• My proxy element is moving and affecting the drag space when it moves. 

 

Here's the pen I've been trying to emulate in gsap 3. This one is written in gsap 2: 

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

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

[GreenSock]

I assume you were attempting something more like this, right?

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

 

I noticed various problems:

1. You were setting bounds to an element that's smaller than the element you're dragging. I'm pretty sure you meant to do this: 

   bounds: {minX: this.proxy.offsetWidth - this.row.offsetWidth, maxX: 0}

    

2. You were trying to use the event object's "x" property instead of the Draggable's "x" property
3. You were using a complex and undocumented way of getting the current x instead of the built-in way: 

   // BAD:
   Number(slider._gsap.x.substring(0, slider._gsap.x.length - 2))
   
   // GOOD:
   gsap.getProperty(slider, "x")

4. Your scoping in the functions was incorrect. Either set callbackScope :this or just use arrow functions because those lock in scope. 
5. You weren't updating things when the inertia tween (throw) was happening
6. You weren't handling overwriting (so you were creating conflicting tweens which you'd probably never notice, but it's degrading performance unnecessarily)
7. You didn't remove the offset in your onRelease. 

I hope that helps. 

[dkolb5]

Hi Jack,

 

That was exactly what I was looking for! I also really appreciate your notes and explanation of them. 

 

Thank you!