Jump to content
GreenSock

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

GSAP draggable

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

The dragging is super easy. Draggable also has built-in hitTest() capability. For the sorting, no, Draggable does not currently handle that on its own.

You would have to create your own sorting logic and functionality.

 

Our forum moderators Diaco and Blake have worked on some conceptual demos like: http://codepen.io/MAW/details/eIDna/

 

Perhaps that will point you in the right direction.

  • Like 2
Link to comment
Share on other sites

I've been meaning to post this demo because I know this question comes up a lot.

 

Play around with the different setup options to change the layout. For example...

// Changing this to true will make the tiles the same width
var fixedSize = true;

// Changing this to true will create a column layout instead of a grid
var oneColumn = true;

CodePen URL: 

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

  • Like 2
Link to comment
Share on other sites

Very nice take on a GSAP Isotope grid wall OSUBlake :)

  • Like 1
Link to comment
Share on other sites

  • Solution

Thanks. I originally started out trying to copy some of the algorithms DeSandro uses, but soon realized that most layouts can be achieved using a simple tracking loop.

 

Just for the sake of comparison, here's what my demo would like if I used Isotope/Packery+Draggabilly over GSAP. The response time is a lot slower, my range of customization is very limited, and the layout seems to break when I drag a tile off screen and release it.

 

+1 for GSAP

 

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

  • Like 1
Link to comment
Share on other sites

Very cool.. I just tested on my Droid Turbo android 4.4.4 and did not see any response time issues.. even in codepen's mobile edit mode.. great job!

  • Like 1
Link to comment
Share on other sites

Blake, 

 

That Sortable Grid is beautiful! Excellent work. 

I saw it first on my beat up iPhone4S with iOS6 and it responded flawlessly. Super smooth.

 

I love the subtle touches of the element shrinking and becoming semi-transparent when dragged. It just feels really nice.

 

Carl

  • Like 1
Link to comment
Share on other sites

Very nice work indeed, OSUblake! Impressive. 

Link to comment
Share on other sites

  • 3 months later...

Very cool! I tried it on my mobile device and it was super-slick. 

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