en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en en en en en en en lt en en en en en fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en sv en en en en en en en en en en pl en en en hbs_lat en en en sv en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ms en en hu en en en fr en en en es en en en en en hu en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en lv en en en ca en en en en en
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
You loaded GSAP 3.2 but Draggable 3.1. I definitely recommend loading the latest of both.
Your old GSAP one loads a SUUUPER old version. CDNJS stopped supporting "latest" many years ago.
Does that clear things up?
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' });
Share on other sites
Afrowave    18 Likes (Newbie)
Posted February 22, 2020
You loaded GSAP 3.2 but Draggable 3.1. I definitely recommend loading the latest of both.
Your old GSAP one loads a SUUUPER old version. CDNJS stopped supporting "latest" many years ago.
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.
Share on other sites
Afrowave    18 Likes (Newbie)
Posted February 22, 2020
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.
Share on other sites
OSUblake    18,414 Likes (Superhero)
Posted February 23, 2020
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
Share on other sites
OSUblake    18,414 Likes (Superhero)
Posted February 23, 2020
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"); }
Share on other sites
Afrowave    18 Likes (Newbie)
Posted February 23, 2020
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!¬†ūüėÜ
Share on other sites
Afrowave    18 Likes (Newbie)
Posted February 23, 2020
Just looked at the solution again.
Logic errors you say, @OSUblake? You are being polite. Thank you again.
Share on other sites
GreenSock    17,227 Likes (Superhero)
Posted February 23, 2020
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!
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 3
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
GSAP 3.2 Draggable vs GSAP 2.1 Draggable
“GSAP IS the animation library and has been for years. If you're gonna learn one - this is it.”
“GSAP is awesome - I just dropped all my [custom] code, like a thousand lines of code and everything is so so much simpler, smoother and much easier to read for other developers! You have no idea how cool it is to offload that thought process to you guys!”
“Truly, you folks on this forum are the nicest, least judgmental, helpful people I've ever encountered.”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes.”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock‚Äôs.”
“Really quite impressed with @GreenSock JS - even the small things.”
“It's so correct that GSAP's logo is a superhero. Every time I use GSAP it saves me heaps of time and frustration. Thank god for GSAP honestly.”
“The depth of GSAP blows me away like all the time. It seems like I stumble on something new and amazing every time I peek at the docs.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.