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.

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.

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.

Hi. I spent a couple of hours looking over your documentation and tutorials. I didn't find the 'Getting started' link because it is not directly under 'Learning' or 'Examples' navigation options of your web site. In animation, you need a trained eye to notice subtle differences which make the animation much better. The same in graphic design and, particularly in typography - you need a trained eye to see how small changes in the typography of your documentation would improve much its legibility and readability. TweenLite is a complex Javascript object and the examples to use it in your documentation consists of one line of code. Why are you struggling to understand that that is not proper documentation !? The last TweenLine example that you provided does not work unless I change its syntax not to use the 'args' keyword. I also have a bug in Draggable which I reported a few hours ago in a separate discussion thread. There are many, many good things about Greensock. but you don't have two essentials: good documentation and 100% reliable Javascript objects. Before you provide complex features, you should have essentials which are 100% reliable. I'm under deadline to deliver a web site, which must have animation. I've spent over two days of my time to make a few lines of Javascript and GreenSock work. In the future I would need a web animation library, but also in commercial projects with deadlines and in which essential animation features being 100% reliable are critical to success. If you don't stop thinking of yourselves as providers for high-profile, award-winning websites and crazy demos and start focusing on providing essentials which are 100% reliable, I will have no other option but not use GreenSock. I hope you will provide a fast resolve to the Draggable bug I reported.

This is the SVG:

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;">

Thank you. The example doesn't work with the CDN version of TweenLite. I made it work because i have a decade of experience with poorly written documentation and APIs. We shouldn't allow such documentation to become the norm. The documentation of TweenLite constructor mentions two dozens parameters and has only one example of how to apply the constrcutor. That example consists of one line of code. You should also get help from a Technical Writer to create good documentation. Good luck.

Hello. I have a situation very similar to this example, except that the element to be dragged must in the middle of the horizontal width, which is the cause of my confusion. A circle is dragged on the x axis, within the bounds of the width of the parent element: 24em. draggableCircle = Draggable.create("#svg_sliding_circle", { type: "x", bounds: "#svg_slider_parent", onDrag: function() {animation.progress(this.x/24);}}); This dragging generates a change of width in another element in between 80% and 100% but the start (default) width must be 90%; var animation = new TimelineLite({paused:true}); animation.from("#organization_representation", 1, {width: '90%'}); animation.to("#organization_representation", 1, {width: '80%'}); animation.to("#organization_representation", 1, {width: '100%'}); From the UX point of view, it is important that the dragged circle is by default in the middle position on the x axis. By default, the width of the changed element too is in a middle state of width: 90%. Once the page loads, if the user choose to drag the circle from the default middle x-axis position to the right, the width increases to 100%, but I can't figure out how to decrease the width towards 80% if the user choose to drag the circle from the default middle x-axis position to the left. I've spent about one hour trying to read the documentation of TimelineLiet and tried all possible applications of TimelineLite's from, to and fromTo methods. As a senior web developer, i find it totally not ok to spend this much on making four lines of code work and to also ask help for it. You providing services in the web design area, I am unpleasently surprised that you don't have decent legibility and readability in the documentation of your Javascript functions, which is really difficult to read. You should really get help from a designer whom knows typography. Hope you appreaciate my feedback and thank you in advance for a clear and simple resolve to the question about Draggable and TimelineLite.

A user interface element who's clickable area includes the element's shadow can be better interaction. Upon psyhically being within the shadow of a door and before touching the door knob, the door can interact by providing useful information about what is behind it or what would be the consequences of closing it. In any public service, it would be helpful if the door to that service would inform you before opening if there is a long queue of people waiting inside for that service and how long you would have to wait in the queue. In industrial software - software that has hundreds or thousands of user interfaces - it is essential for hundreds of the user interface elements to occupy the smallest space possible and to be interactive. Thus, extendable clickable areas should be fully covered by a professional interactive animation library.

Thank you for your replies. I have a simple SVG circle: <circle id='svg_sliding_circle' cx='12.421875' cy='0.7125' r='0.45' style='fill: #DCDCDC;' filter='url(#f1)' /> which is "raised" by a shadow underneath it: <filter id="f1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceAlpha" dx="0.15" dy="0.15" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="0.075"> <feBlend in="SourceGraphic" in2="blurOut" mode="normal"> </filter> I was expecting for the cursor to be activated upon entering the shadow, as is with CSS box-shadows: http://dabblet.com/gist/df5686d4047307991f73 I noticed that if I remove the GreenSock Draggable object from the circle and add to the style of the circle "cursor: pointer; cursor hand", the cursor does not change to a hand shape upon entering the shadow. Obviously, this is not correct behavior. I hope to have some time to look into the SVG specification and see whether this is missing in order to report it to the SVG Working Group. Nevertheless, until browser vendors fix this, a professional Javascript animation library should have an extendable click area functionality. I don't think it is ok to have to add a larger transparent element underneath each element which has a shadow. I plan to use SVG extensively in software which has hundreds of web user interfaces. I would find it unacceptable to have to create hundreds of transparent elements in order to extend the clickable area. Currently, I am evaluating GreenSock on a few user interfaces. I will consider buying it for complex software in 6 to 12 months. Thank you.

Hi. It is an UX best practice for small interaction elements to have a clickable area which is larger than themselves. This is usually done with transparent drop-shadows in CSS or with transparent filters in SVG. Having extended a Draggable SVG element with a filter, the "draggable cursor" does not appear if the mouse is over the filter of the element. I think this is a major flaw of GreenSock - lots of animatable elements to be interacted with need to be small. It would be nice to have this flaw fixed soon.