Restrict draggable element

[wind_kind 0 Likes (Newbie)]

I have the basics figured out from following the brilliant docs, thanks for that. I am stuck however.

 

I would like the nav in my example to be draggable only to the top and only by about 45 pixels. When it reaches 45px you shouldn't be able to drag it any further and then on release obviously it tweens back to where it started (but that I have working already).

 

It would be cool if I can have the edgeResistance kick in as well close to the end of the drag but it's not required.

 

It should be easy but I can't get my head around how I will achieve this.

See the Pen wBygBR by anon (@anon) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Hi Wind_kind,

 

All you need to do is define some bounds, like a minY and maxY, or top and height

bounds: {minY: -section[0].offsetHeight + 45, maxY: 50},
edgeResistance: 0.75,

See the Pen NPyjRY by osublake (@osublake) on CodePen

[wind_kind 0 Likes (Newbie)]

Thanks for the reply OSUblake.

 

Your example is close to what I am looking to do and playing around with the min max gets me close but I don't want to be able to drag toward the bottom at all and when dragging up the bottom of the nav should never move past the bottom of the screen.

 

No matter how I change it, I can always drag the nav up a lot.

[OSUblake 9,990 Likes (Superhero)]

Try using yPercent and cutting the bounds in half. And since it won't pass its edge, you can use dragResistance instead. You could even change the dragResistance based on its position.

TweenLite.set(nav, {x:0, y:0, z:0, yPercent: 50});

//...
bounds: {minY: -50, maxY: 0},
dragResistance: 0.85,

See the Pen NPyjRY by osublake (@osublake) on CodePen

[wind_kind 0 Likes (Newbie)]

ah brilliant. It works great and I learned about the yPercent. This is such a great tool. Thanks.