Jump to content
GreenSock

Afrowave

GSAP 3.2 Draggable vs GSAP 2.1 Draggable

Recommended Posts

Dear Greensockes, 😄

 

Draggable of GreenSock 2.1 is only able to specify its target option element through an Id. If you target the first of a bunch of divs with classes only, it gives this error “Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null”.

So I decided to try GSAP 3.x and the latest and greatest 3.2.  But I found another quirk, for lack a better word.

The code pen attached is an exact replica of one done in

See the Pen YzXpOOL?editors=0010 by Afrowave (@Afrowave) on CodePen

 

The gsap.to() that replaces the TweenLite.to() does not seem to work as it should. In my case, if the draggable button does not get to the target, it is to TweenLite.to(button, 0.3, {top: button.originalTop, left: button.originalLeft}) back to its original position.

 

If it does get to its target, it is to TweenLite.to(button, 0.3, {left: target.left, top: target.top, x: 0, y: 0}.
If it does the button in GSAP 3.2 gets offset in an arbitrary way.

Something changed. But I don't know what.

See the Pen YzXpOQE?editors=0010 by Afrowave (@Afrowave) on CodePen

Link to comment
Share on other sites

A few things: 

  1. You loaded GSAP 3.2 but Draggable 3.1. I definitely recommend loading the latest of both. 
  2. Your old GSAP one loads a SUUUPER old version. CDNJS stopped supporting "latest" many years ago. 
  3. You've got throwProps/inertia enabled which means it'll create a tween onRelease but you ALSO created a [conflicting] tween at the same time. The default overwrite mode in GSAP 3 is false. You have to opt-in to overwriting. If you want it to automatically find (and kill) conflicting tweens, just set overwrite:"auto" on your tween(s) or do it globally like: gsap.defaults({overwrite:"auto"});

Does that clear things up? 

  • Like 1
Link to comment
Share on other sites

1 hour ago, Afrowave said:

Draggable of GreenSock 2.1 is only able to specify its target option element through an Id.

Hi Afrowave, just a quick reaction, because I 'by accident' just read your post, because I saw 'Draggable' and version 3 and I'm converting draggable gsap v2 projects to v3 at the moment so I was curious;

 

The draggable versions before gsap version 3 were already capable of using objects instead of needing to use IDs of DOM elements.

Not sure if I misunderstood, but just so you know this was already possible. Just my 2cts so you know it's also possible in version 2 to do things like 

this.discEl = document.getElementById('disc');
this.draggableDisc = Draggable.create(this.discEl, { type: 'rotation' });

 

  • Like 1
Link to comment
Share on other sites

Quote
  1. You loaded GSAP 3.2 but Draggable 3.1. I definitely recommend loading the latest of both. 
  2. Your old GSAP one loads a SUUUPER old version. CDNJS stopped supporting "latest" many years ago. 
  3. You've got throwProps/inertia enabled which means it'll create a tween onRelease but you ALSO created a [conflicting] tween at the same time. The default overwrite mode in GSAP 3 is false. You have to opt-in to overwriting. If you want it to automatically find (and kill) conflicting tweens, just set overwrite:"auto" on your tween(s) or do it globally like: gsap.defaults({overwrite:"auto"});

1. Changed Draggable to 3.2. I hadn't noticed. 

2. The Old GSAP was taken from one of your old posts. It was for demonstration. 😅

3. I removed Inertia from GSAP 3.2 and now it works as it should. I had not idea of the conflict. Of course, I am activating two tweens onRelease and onDragEnd.

  • Like 1
Link to comment
Share on other sites

Now to the "meat and potatoes" of the question.
In Draggable 2.1, I am targeting the top left div with the id of Dev_1. With this target in place, my buttons can tween back to place when dragged slightly off their original position. If the button is dragged onto the table, it behaves at is should in this case, if it does not get to the target div, it goes back to its origanal place. Very good.

In Draggable 3.2, I have set the target to be any div that has the class of addRed.  There is a slight difference here. If the button goes onto the table it behaves as it should because there is a specific target based on the denoted class. Very good.

But, if you drag the button, say, in between the other buttons, it is not able to tween back to its original position. Hence the question, before the button enters the table and before the target div is highlighted, why is the now off-original location, dragged button not able to tween back to its original position when released?

It seems that the dragged button must have a predefined target that is identified with an ID,  to be able to tween back to its original location, even if it does not come close to the designated target, to answer @Friebel.

I hope that makes sense. 

Link to comment
Share on other sites

3 hours ago, Afrowave said:

Draggable of GreenSock 2.1 is only able to specify its target option element through an Id

 

No it's doesn't. GSAP/Draggable knows nothing about IDs. It works with element objects. It would be quite limiting if gsap only worked with stuff that had an ID.

 

You just have logic errors. You can't run a hit test on something that doesn't exist.

 

See the Pen 40a20996e681283f6de8f43d410ff49c by osublake (@osublake) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

Also, don't use events to get the target as it might not be what you are expecting due to way events bubble. Just use this.target.

 

// BAD
onDragStart: function(e) {
    if (e.target.targetAttachedTo) e.target.targetAttachedTo.removeClass("occupied");
}

// GOOD
onDragStart: function() {
    if (this.target.targetAttachedTo) this.target.targetAttachedTo.removeClass("occupied");
}

 

  • Like 2
Link to comment
Share on other sites

@OSUblake,

Wow! 

Quote

It would be quite limiting if gsap only worked with stuff that had an ID.
...
You just have logic errors. You can't run a hit test on something that doesn't exist.

I know! I think I was a bit dramatic but I could not see the trees in the forest. Everything was a blur! 😁

Thank you and thank you Jack@GreenSock. GSAP is brilliant. With all due respect to the competition, there isn 't any! 😆

  • Like 2
Link to comment
Share on other sites

Just looked at the solution again.

Logic errors you say, @OSUblake? You are being polite. Thank you again.

  • Like 2
Link to comment
Share on other sites

1 hour ago, Afrowave said:

Thank you and thank you Jack@GreenSock. GSAP is brilliant. With all due respect to the competition, there isn 't any! 😆

Very kind of you to say, @Afrowave. Thanks so much! GSAP certainly wouldn't be what it is today without this community. @OSUblake very much included. 

 

Good luck with your project and happy tweening!

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