Jump to content

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

Bound draggable at top only

Go to solution Solved by Carl,

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've tried a couple of things now but I need help with this please.


I have a draggable block that I want to restrict from going past the top of the screen but should be able to drag past the bottom fully. If you view the pen I did, you will see an arrow/tab at the bottom. Ideally this tab will be halfway visible at the bottom and when the block is dragged all the way up the bottom half should be visible plus 5px of the grey background.


So when dragging the red block to the top it should stop 5px before so I don't see the grey peeking out at the bottom. So far I can drag it all the way and then I did some checks to just get the red block in place but I have to get those bounds right.


Like I said, I tried using hitTest and some of my own logic and checking the element Y position etc but my knowledge with this is limited.

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

Link to comment
Share on other sites

I think the translations you were doing in css were impacting the calculations of the bounds.


See if this works for you:


See the Pen EKKLBR?editors=0010 by GreenSock (@GreenSock) on CodePen


Brilliant. 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.