Tread

Decided that I would try a go at nested draggables one more time... And it worked! It's not so hacky this round. Container div with draggable type: "x,y"and an inner div with draggable type: "y". Then, on the container, include this: onLockAxis: function (e) { if (this.lockedAxis === "x") { this.endDrag(e); } else { innerDraggable.disable(); } }, onRelease: function () { if (this.getDirection() === "right" || this.getDirection() === "left") { innerDraggable.enable(); } } This allows me to figure out which way the user is dragging (via lockedAxis) and do with it whatever is needed. If the container was just type: "x", then the two draggables together would act like a single type: "x,y". I want them to act like a single lockAxis draggable, but with extra-granular control over their motion. Coincidentally, this arrangement doesn't require tweening the draggable like I needed to before. (Bonus) Thanks, again, for the response Carl. Inspired me to give it another go from scratch!

Thanks for the response, Carl. If you guys come up with any solution, it'd be much appreciated. Just getting the tween to work with draggable felt a bit like a magic trick, so I knew that things were getting hacky. Originally, I had multiple draggable instances, one big div with type: "x", and an inner div with type: "y". I just couldn't get it to feel right. Can you think of any way to duplicate the lock axis behavior, using two draggable instances (same idea as described in the line above)? Then, I'd have granular control, and could disable/enable each draggable as I pleased, keeping things clean.

Oh, wow. Just realized that you don't need to throw it first! You can see the issue by just dragging vertically until after tween completes.

Hey guys, Love GSAP so far. Great job with it! Having an issue where if you throw a lockAxis draggable horizontally, interrupt the throw with a vertical drag, and while you're dragging vertically, have it tweened horizontally. (Don't let go of the vertical drag, yet.) When the horizontal tween completes, the next pixel you vertically drag will jump by the vertical distance you dragged it while the tween was running. (I think that's the distance it jumps.) I've found a hacky workaround to deal with this (by offsetting elements by the jumped distance), but would like to properly handle dragging and tweening the same object. Draggable.update() in the onUpdate event of the tween makes things really nutty. http://codepen.io/trenthm/pen/QNwKXz