Jump to content

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

Draggable Slider

Recommended Posts

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

Link to post
Share on other sites

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. 

  • Like 2
Link to post
Share on other sites

Hi Jack,


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


Thank you!

  • Like 1
Link to post
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.