Question about Draggable and TimelineLite; Awful Javascript documentation

[cristian.jujea]

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.

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

 

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.

[OSUblake]

5 hours ago, cristian.jujea said:

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.

 

Then move your element to the middle and set the progress of the animation to 0.5. Problem solved. Just don't expect your units to be in "em" as the browser reports everything in pixels.

 

The minX/maxX values on your draggable instance will be the current bounds. If minX is not 0, you can normalize it like this.

function onDrag() {
  var norm = (this.x - this.minX) / (this.maxX - this.minX);
  animation.progress(norm);
}

 

See the Pen ef02a559d1841f32d9f23e2369f2f196?editors=0010 by osublake (@osublake) on CodePen

 

 

 

[cristian.jujea]

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.

[Carl]

Hi Cristian, 

 

Sorry you are having so much trouble reading and understanding the documentation. An animation engine as robust as GSAP has many moving parts so it can be a challenge to serve all audiences. We do our best to provide solid demos and videos so that beginners can get up and running quickly while also serving the more advanced developers like yourself that are out there making all the high-profile, award-winning websites and crazy demos.

 

Surprisingly, your criticism falls far from the norm as we are often told how easy it is to get up and running with GSAP.  

 

Perhaps we missed the mark in documenting a very particular feature you needed for your project or maybe you jumped into too deep without a proper foundation, (something I've been guilty of plenty of times). Have you read the Getting Started guide, looked at the Jump Start and watched the video?

 

https://greensock.com/get-started-js

 

Just struggling to understand how the TweenLite constructor isn't properly illustrated throughout the docs and our site.

 

If there is a particular method, property, or usage of TweenLite that you are having trouble with in the docs, please let us know how it can be improved and we will do what we can. We admit that sometimes we are too close to the project to see things as other developers do "from the outside".

 

------

 

As for your latest comment:

 

Quote

The example doesn't work with the CDN version of TweenLite.

 

Blake's example uses the CDN version of TweenMax (which loads TweenLite and the CSSPlugin).

If you are using TweenLite on it's own, be sure to load CSSPlugin too as mentioned here, here and here.

 

If you are still having problems with the CDN version of TweenLite. Please provide a reduced demo that clearly illustrates the problem. We would love to get it fixed.

 

Happy Tweening!

[cristian.jujea]

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.

 

 

[OSUblake]

You provided no evidence of a bug in Draggable. It's impossible to reproduce the problem you're seeing without more context, e.g. a demo that clearly demonstrates the issue. There are many other factors that could be at play like your HTML, CSS, and JavaScript.

 

What TweenLite example isn't working? If you see it working in a demo, then it works. 

 

And what "args" keyword you are talking about? There is no such thing in TweenLite, and I have no idea where you are getting that from.

 

The docs you're referring to are for the API, which are meant to show the properties, methods, and required inputs. Examples of how to use GSAP can be found in other parts of the site, like under the learning link. 

 

There's something fundamentally wrong with how you're trying to use GSAP. I don't what that might be, but I would highly recommend to stop doing what you're doing, forget everything that you have done so far, and do not write another line of code until you have thoroughly gone through the getting started guide and the jump start examples.

 

[GreenSock]

I'm eager to rectify any bugs that you may have encountered, @cristian.jujea. I read your posts a few times and I'm really struggling to understand the issue(s). No reduced test case was provided, nor any source code. Blake provided a specific suggestion along with a demo. I'm as confused as he is about this "args" keyword. Again, I want to help - I'm just lost.

 

I understand that you think the typography and content in our docs is terrible - we'll certainly take that into consideration but it'd be awesome if you'd provide more specific recommendations. Is the font too small? Is it a color issue? Is there something constructive you'd like to offer? 

 

I must admit that your posts have been a little jarring since we typically hear such glowing, positive reviews of our docs and the tools themselves. That's not to say your comments have no merit. I guess I'm just disappointed that even in the face of so many people jumping in to offer free help (with kindness and generosity), that your responses come across as rather angry, dismissive, and insulting. We really are trying to help.