bug in Draggable

[cristian.jujea]

Hi.  I have an SVG circle which is draggable just fine with this line of code:

 

draggableCircle = Draggable.create("#svg_sliding_circle", {type: "x"});

 

The bug occurs when I add the bounds of its container element. Either of these two lines of code cause the circle to effectively be invisible on the screen.

 

draggableCircle = Draggable.create("#svg_sliding_circle", {type: "x", bounds: "#svg_slider_parent"});

draggableCircle = Draggable.create("#svg_sliding_circle", {type: "x", bounds: document.getElementById("svg_slider_parent")});

 

Changing the previous line of code by only adding the '#' character in front of the id of the container element does not cause the circle to be invisible on the screen and makes the circle draggable, but the circle is draggable also outside its container element.

 

draggableCircle = Draggable.create("#svg_sliding_circle", {type: "x", bounds: document.getElementById("#svg_slider_parent")});

 

If it is any help, here is the change that is applied to the circle after that one line of Javascript code executes and makes the circle invisible:

 

 <g id="svg_sliding_circle" data-svg-origin="11.971875190734863 0" transform="matrix(1,0,0,1,-174.95625019073486,0)" style="cursor: move; touch-action: pan-y; -moz-user-select: none;">
                          
                           

[Carl]

Very tough to diagnose without seeing the actual SVG. For the best support please supply a reduced test case.

The demo below already loads Draggable.

 

 

See the Pen yXMXEy by GreenSock (@GreenSock) on CodePen

 

1. Run Pen
2. Click "edit on CodePen"
3. Fork
4. Add the smallest amount of html, css and js to reproduce your error
5. Save
6. Paste url to demo in reply

Thanks!

[cristian.jujea]

This is the SVG:

 

[Carl]

I looked at your SVG. Unfortunately it is of little help as I can't assess what is wrong just by looking at it (and no, I'm not going to type it out and try to re-create your problem). It really shouldn't take you more than 3 minutes to paste your code into a CodePen or jsFiddle. Please see my instructions above. This is a great article explaining why a reduced test case is so important when seeking support.

 

Once we can see the problem you are having in an isolated demo we will do our best to figure it out.

 

[cristian.jujea]

Hi Carl, I've provided you the reduced test case, but you are insisting on what you are familiar with and personally comfortable to start from: CodePen or jsFiddle.

 

I've found a way around the bug by enclosing the SVG element in a div element and getting the bounds from that div element. I've posted recently another bug and documentation lacks in a separate discussion thread.

 

I think that GreenSock has extraordinary features and is a great animation library, but it's basic, essential animation features are not 100% reliable and I don't see a professional Software Quality Assurance process. I will work in commercial projects with deadlines and in which it is essential for basic or essential animation features to be 100% reliable.

 

I am sorry, but if GreenSock doesn't start thinking from the perspective of a professional Software Quality Assurance process which will guarantee 100% reliability and bugs fixed immediately upon first submission, I will have no other choice but not to use GreenSock.

[mikel]

Hi Christian,

 

Your comment is not worth it from my point of view to deal with it in detail.

If you are a professional, you should be clear what you are saying.

 

Mikel

[GreenSock]

Howdy, @cristian.jujea. Very sorry to hear about all your disappointments recently. I also trust that you're experiencing one of the most special parts of GSAP - its community. Nevertheless, I totally agree with you that it doesn't matter how widely used a product is or fancy features or community if the basics aren't rock solid. We really aim to deliver that, and I like to think we've built a pretty long track record of doing exactly that (though we certainly aren't perfect and like any software, there are occasionally bugs). 

 

Rather than being defensive and trying to prove to you how uncommon your experience is, I'd really like to address your concerns as best we can.

 

It does look like you've discovered a regression that occurred 1.20.1 that'd only affect cases where you use a root <svg> element as the "bounds". Sorry about that - it should be resolved in the next release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

Here's a demo of it working (I manually typed out the code from your screen shot, but added some borders/colors to help visualize things better): 

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

 

 

You could also just use an older version of Draggable to avoid that regression in the mean time. Again, please accept my apologies for that issue. 

 

Also, I just wanted to point out that while it may seem trivial from the outside, there's a TON of complex work that Draggable must do under the hood to normalize behavior across browsers, particularly with SVG. See if you can find any other library that'll allow you to apply transforms to a container element and drag a child element properly. It's gotta calculate matrices and factor in a bunch of differences in the ways various browsers handle borders, offsets, margins, blah, blah. In fact, Draggable is probably the single most complex tool we've built (well, perhaps rivaled by MorphSVGPlugin). So as frustrating as it may be to bump into some rough edges in what may appear to be "the basics", I assure you that we've spent a ton of time trying to solve problems for users. And when a bug is discovered, we really work to be fast to resolve it. 

 

Good luck with the rest of your GSAP/Draggable adventures, and please let us know what else we can do to make it more enjoyable for you. 

[cristian.jujea]

You don't have to appologize for a bug. I've reported another bug in my other recent discussion thread. Please don't ask for a CodePen example, it is described in plain and simple English.  In my other post, I've also given very important advice on your documentation.

 

As I mentioned to you, as a future client, I would need a professional Software Quality Assurance process, which includes Change Management.

Any company, such IBM, Oracle and many, many other companies providing software development services, would have the same expectation from GreenSock as I do.

 

I can't possibly have some 10% of the users of a digital product or service not being able to use that service or product for a couple of hours because of a bug. This happened in the dark ages :)))

 

Seriously, if you won't have a professional Software Quality Assurance process, I won't have any other choice but to implement web animation strictly internally, within my company, by internal software development and software quality assurance teams and without any libraries. Good luck.

[GreenSock]

You pointed out a problem, we fixed it the same day and politely thanked you, apologized for the issue, and offered a fix. What else are you wanting at this point? Why the comment about "10% of users...not being able to use the service...this happened in the dark ages."? I'm so confused. 

 

For the record, I believe IBM and Oracle are both GreenSock users and they've never complained...even once (at least not that I can recall). Google, Microsoft, Intel, Adobe, and almost every major brand I can think of also use GSAP. That's not to say we're perfect (far from it), but I like to think we've got a pretty good track record of delivering solid solutions and prompt customer service. Again, I'm sorry we've disappointed you.

 

Perhaps GreenSock tools aren't a good fit for you. You mentioned that you may just need to build your own replacement internally - I'm sad that you feel the need to resort to that, but I wish you the best of luck. Trust me - as someone who has spent literally thousands of hours building this stuff, you're likely in for some big headaches but maybe your Software Quality Assurance process and Change Management procedures are much better and will be able to avoid any such problems.

 

We've genuinely tried to help you and we're committed to fixing any problems with GreenSock tools, so please don't hesitate to let us know if/when you run across any in the future. 

 

 

[cristian.jujea]

I don't want anything. Thank you very much for your promptitude. I was simply trying to provide helpful advice as an appreciation of the free trial of GreenSock.

 

I have a start-up IT which I will want in the near future to do software development for digital products and services. I simply shared my point of view, as the head of a potential future client company of GreenSock. I am realy sorry if my point of view is offensive or jarring in any, I was simply trying to provide helpful advice as an appreciation of the free trial of GreenSock and of the many positive reviews you've had so far, including from Google.

 

This is the other bug. This line of code works:

 

var animation = TweenLite.to("#organization_representation", 1, { width: '100%', paused: true });

 

This line of code causes the CDN Greensock library to throw an exception:

 

var animation = TweenLite.to("#organization_representation", 1, { attr: { width: "100%" },  paused: true });

 

If you would like to start figuring out what is wrong with the typography of your documentation, you could start from reading the book 'Getting the Hang of Web Typography' by Smashing Magazine. Typography is a complex topic, which has been developed for a few hundred years now. There's half a dozen books you should read to make your documentation to have great legibility and readiability. A must read is 'The Elements of Typographic Style' by Robert Bringhurst . This is a version of his book for the web http://webtypography.net/ .Perhaps it is best for you to get a professional web designer, whom has an expertise in typography. Each of the four main Javascript objects are complex, so their documenation should have a dozen code examples for each. Draggable has a few decent examples. TweenLite has only one example. Perhaps it is best for you to get a Technical Writer to help you with the text of your documentation.

 

Once again, thank you very much.

[Carl]

Hmm, I couldn't guess what the exception was being thrown and there were a number of other factors I could not verify from the limited details you provided for your bug. Below is a gif showing that your code works fine with the latest, CDN-hosted version of TweenLite (note output in console). I had to remove paused:true so that the tween would run.

 

 

We ask for online demos that we can fork and save as after years or answering 1000s of support issues we've found it provides the quickest way for us to assess the problem and provide concise solutions that everyone can benefit from.  We spent years downloading Flash Fla files, compiling, testing, saving, zipping uploading and all that mess. With the modern web, online editors are one of the community's greatest assets.

 

We prefer CodePen as:

1. We are happy customers of their's and would love to see them succeed
2. They provide TweenMax in their drop-down of 3rd party libraries
3. They have built a strong community of creative developers that can like, share, and discuss each other's work.
4. Their support is excellent (my expert opinion).
5. We admire what Chris Coyier has contributed to the community through css-tricks, his podcast, conferences and other outlets.

However, you can use jsFiddle, jsBin, Plunkr or any other tool that allows you to share code that can be run and edited online. 

 

CodePen has a wonderful tagline: "Demo or it didn't happen".

 

When seeking support the responsibility is on you to prove to us that an issue exists. It just isn't an effective use of our time to offer a free service where our staff and volunteers spend hours trying to guess what the users are doing wrong or where a bug may be in our code with little details or proof. I think you will find that the quality and speed of the support you receive is directly proportional to the quality and clarity of the information you provide. 

 

Hopefully, this will help you understand why demos are so important to us. I'd encourage you to stick around and read these forums a few times a week. I think you will find plenty of evidence of users being well-served when they make a little effort to help us understand their problems. 

 

Cheers!

 

 

 

 

 

 

[huwllewellyn]

I came across a similar problem where requiring GSAP by webpack gave it a scope that broke some functionality:

require("gsap");
require("gsap/Draggable");

Leading to the same problem mentioned by OP. If you include GSAP in script tags in the HTML you won't have the problem. 

I was able to continue using webpack by changing the way that it was imported:

require("imports-loader?module=>undefined,define=>undefined!gsap");
require("gsap/Draggable");

I hope this helps someone  It's such a great library but I worry that GSAP will be overtaken by others who are able to better serve the modern dev environment.