dkolb5 Posted July 22, 2020 Share Posted July 22, 2020 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 comment Share on other sites More sharing options...
GreenSock Posted July 22, 2020 Share Posted July 22, 2020 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: 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} You were trying to use the event object's "x" property instead of the Draggable's "x" property 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") Your scoping in the functions was incorrect. Either set callbackScope :this or just use arrow functions because those lock in scope. You weren't updating things when the inertia tween (throw) was happening You weren't handling overwriting (so you were creating conflicting tweens which you'd probably never notice, but it's degrading performance unnecessarily) You didn't remove the offset in your onRelease. I hope that helps. 2 Link to comment Share on other sites More sharing options...
dkolb5 Posted July 22, 2020 Author Share Posted July 22, 2020 Hi Jack, That was exactly what I was looking for! I also really appreciate your notes and explanation of them. Thank you! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now