Jump to content


Restrict draggable element

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
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.