Jump to content
Search Community

2 questions about documentation and error messages

Robert Wildling test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, dear GSAP community,

 

two general questions bug me since quite some time and today I dare to ask (even though they are probably totally stupid):

 

1. When opening the docs for, e.g., https://greensock.com/docs/TimelineMax/TimelineMax() to inspect the vars parameters, the params are actually not ordered alphabetically. And even though this is totally unimportant, I was wondering, if there is a reason for that. (In the tree on the left side, properties and methods are ordered alphabetically...)

2. Sometimes a dom element for a tween is not found, which throws an error message in the console saying sth like this: `Cannot tween a null target.` I was wondering, if there is a chance to make GSAP be a bit more specific about which tween target it couldn't find, since the parameter should be given as string, anyway; or at least the tween name; or from where it was called?). Or am I missing something?


(In my case, the error is thrown, when I forget to implement a `if (document.querySelector('.someClass')) { ... }`. At that time, the code already run through webpack and is implemented in some CMS. I know, I should do code splitting and deliver code only there, where it is needed. But that's a different story...)

 

I did search the forums, but was not able to find proper resources. I hope you can help me understand! Thanks!

Link to comment
Share on other sites

14 minutes ago, Robert Wildling said:

the params are actually not ordered alphabetically. And even though this is totally unimportant, I was wondering, if there is a reason for that.

 

Ha. Yeah, the thinking there was to group things loosely by popularity and then typically the callbacks are grouped toward the end. Sorry if that was confusing. 

 

16 minutes ago, Robert Wildling said:

I was wondering, if there is a chance to make GSAP be a bit more specific about which tween target it couldn't find, since the parameter should be given as string, anyway; or at least the tween name; or from where it was called?

 

That's a little tricky because:

  1. Plenty of people don't pass in strings, like TweenMax.to(theirElementReference...) in which means GSAP is literally receiving null as the value. 
  2. I'm not aware of a way to cleanly reference where the method was called from without throwing an actual Error which would halt JS execution.
  3. I'm not sure what you mean by "tween name". Do you mean an id (if the developer defined one)? 
  4. We could add code that'd run through various conditional logic like "if the target was selector text, show it, if there's an id, show that, if it's just null, show neither, etc." but frankly I'm sensitive about the file size considerations. That logic would have to go into the core TweenLite class which is intended to be as lightweight as possible. Since it's been this way for many, many years and very few people have expressed the need for the additional details, it's hard for me to see the tradeoff in file size as a worthwhile one. See what I mean? 

Good questions! Not "totally stupid" at all. 

 

  • Like 1
Link to comment
Share on other sites

Thank you for you speed-light response, @GreenSock! i didn't even have time to brew a new cup of coffee... I guess you are the personified GSAP-principle: INCREDIBLY FAST! :-)

 

Ad 1: So there is a popularity counter somewhere? :-) well, my personal favorite would still be alphabetically...

 

Ad 2.1: I know this is wrong/weird/wanna-be-extra-smart/{fillInAsApproriate} thinking on my side. I had sth in mind that would "stringify" the reference input in case an error was thrown. So theirElementReference would indeed be that in the error console: Could not tween "theirElementReference"... maybe additionally passing along the reference as a string... well, that would be overhead. (That topic is definitely beyond my JS skills! So please forgive, if I do not make any sense and just forget about it...)

 

Ad 2.3: I was actually thinking of the variable definition as in: `let myAnim = new Timelinemax(...)`, so "myAnim" could be thrown. But I wouldn't know what to do in anonymous cases, where only `TweenMax.to(...)` is used. 

 

Ad 2.4: "keep is small": I am totally with you!

Link to comment
Share on other sites

8 minutes ago, Robert Wildling said:

So theirElementReference would indeed be that in the error console: Could not tween "theirElementReference"... maybe additionally passing along the reference as a string

 

Yeah, I don't think that's possible. For example:

var myVariable = null;
test(myVariable); 
function test(target) {
    console.log(target); //null
    //how can we get the string "myVariable" from target??? Impossible. 
}

 

11 minutes ago, Robert Wildling said:

I was actually thinking of the variable definition as in: `let myAnim = new Timelinemax(...)`, so "myAnim" could be thrown.

 

Same problem. It's simply impossible. Or if you can figure out how to do it, I'd LOVE to see ;)

let myVariable = test(null); 
function test(target) {
    console.log("???"); //how would we get "myVariable" from inside this function??? Impossible. 
}

 

Again, maybe I'm must missing some nugget of knowledge here. I welcome anyone to enlighten me. 

  • Like 1
Link to comment
Share on other sites

On 1/25/2019 at 11:22 AM, Robert Wildling said:

Ad 1: So there is a popularity counter somewhere? :-) well, my personal favorite would still be alphabetically...

 

Same here. Alphabetically would be much better. And I hate the auto-expand/collapse behavior. It's really annoying having it toggle while trying to copy some text.

 

 

On 1/25/2019 at 10:32 AM, Robert Wildling said:

2. Sometimes a dom element for a tween is not found, which throws an error message in the console saying sth like this: `Cannot tween a null target.` I was wondering, if there is a chance to make GSAP be a bit more specific about which tween target it couldn't find, since the parameter should be given as string, anyway; or at least the tween name; or from where it was called?). Or am I missing something?

 

 

Look at the call stack. It should show you where it was called from.

 

bzzlRq3.png

 

 

On 1/25/2019 at 10:56 AM, GreenSock said:

I'm not aware of a way to cleanly reference where the method was called from without throwing an actual Error which would halt JS execution.

 

console.error() looks just like throwing an error, but it doesn't stop JS execution. There's also console.trace(), but it doesn't have a message parameter.

 

 

  • Like 1
Link to comment
Share on other sites

4 minutes ago, Robert Wildling said:

I do keep the callstack in mind, it just becomes quite obfuscated in certain situations once webpack 4 in dev mode did its job. I guess this would also be a scenario where loading from CDN and therefore separating between own and vendor libraries helps. Need to test that...

 

Are you using source maps? That should make it easier to track down stuff like that.

https://webpack.js.org/guides/development/#using-source-maps

 

  • Like 1
Link to comment
Share on other sites

Alright, gentlemen, I reorganized the special properties in alphabetical order. Merry Christmas ;)

 

Blake, the click-to-expand thing is tricky - it seemed very useful to have things collapsed by default and allow people to expand as they wish. Is it somehow preventing you from copying/pasting effectively? 

Link to comment
Share on other sites

1 hour ago, GreenSock said:

Blake, the click-to-expand thing is tricky - it seemed very useful to have things collapsed by default and allow people to expand as they wish. Is it somehow preventing you from copying/pasting effectively? 

 

No. I just find it annoying having to expand stuff when it's usually not that much longer than the collapsed content. And when copying text, it will automatically collapse once you release your mouse button. I usually don't it want to collapse, and my initial reaction is to immediately click to re-expand the content, but that won't work if the click event happened in the expanded area because the item below it will move up, so I end up toggling the item below the one I'm interested in.

 

Link to comment
Share on other sites

@GreenSock You just gotta have to LOVE Greensock! Thanks soooo much! I really wasn't expecting that! Hugs to the "guilty" person!

 

May I comment on the collapse topic?


I do not copy from the list, but the behaviour @OSUblake describes is familiar from other sites and admittedly not one that is welcome, if it is a source that needs to be used often.

 

On the other hand, I am very much in the habit of using the browser search. And in the case of the collapsed vars, the search results are hidden, which is ... hmmm... well, not so useful, to be honest. Layout-wise, it also seems to be a bit unbalanced, when the left column with the list of all the methods is so very long that even the expanded list of vars won't surpass it in height.

I suppose that documentation is just not the right place for having too much fancy animation stuff going on. As for myself, I like it to "just be there".
 

  • Like 1
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.
×
×
  • Create New...