Pivot Change and Debugging ?

[Lynx]

Is it possible to change the pivot for an animation ? Is it also possible to get a written debugging of GSAP reading the tweens, a simple numbering would suffice, as in the tween playing first is 1, then the second tween playing is 2, if tween 3 etc ?

[Carl]

Please consult the CSSPlugin docs

https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Read the section on transformOrigin

 

transformOrigin is also discussed in the Getting Started Guide https://greensock.com/get-started-js

 

Not really sure about the second part if your question. Doesn't sound like something readily available.

[GreenSock]

As far as the debugging goes, you should be able to accomplish that sort of thing on your own using onStart callbacks and the "data" property. 

TweenLite.to(... {onStart:report, data:"my first tween"...});
TweenLite.to(... {onStart:report, data:"my second tween" ...});
...
function report() {
    console.log(this.data);
}

"data" can be pretty much whatever you want (not just a string). 

[Lynx]

Is there more information on "onStart" or "data" ? I'm using JsFiddle for testing, not sure if it can display a console.log as I can't find any option and I can't use a browsers console.log with fiddle as I only get an error !

[Rodrigo]

Hi,

 

onStart is one of the many callbacks available in GSAP, something you would know if you've checked the API documentation:

 

(click show more and scroll down a bit)

http://greensock.com/docs/#/HTML5/GSAP/TweenLite/TweenLite/

 

As for the data property I don't know when it was added (I normally use the params for the specific callback I'm using), but is basically a property of the TweenLite instance being created as it can be referenced using this.data, which is how you point to an object's property. Objects in JS is something you should learn to create and work with because they are incredibly useful.

 

http://greensock.com/docs/#/HTML5/GSAP/TweenLite/data/

 

In fiddle and codepen you can use console.log() and it'll work as expected, perhaps before run the fiddle you could clear the console in order to get a fresh batch of logs. Again log() is a method of the console object that will basically will render in the browser's console whatever you pass in the method.

[Lynx]

I know what objects are, making instances etc. I haven't used them much, this can be a good time to get to know them. 

logo.to(".proxylogo",2,{skewY:45,skewX:90}, {onStart:report, data:"tween one"});

function report() {
    console.log(logo.data);
}

This is what I have thus far ?

[jamiejefferson]

As per the explanation of functions and parameters here, you have to use the parameters of the functions that are defined in the API. The 4th parameter of a .to() tween does not accept more vars. 

 

As per the API for TweenLite.to() here, the 3rd parameter vars includes all special properties of the tween:

An object defining the end value for each property that should be tweened as well as any special properties like onComplete, ease, etc. For example, to tween element's left to 100 and element's top to 200 and then call myFunction, do this: myTimeline.to(element, 1, {left:100, top:200, onComplete:myFunction}).

As both GreenSock and Rodrigo have said, you access the data of a tween in a callback with this.data, not logo.data.

logo.to(".proxylogo", 2, {skewY:45, skewX:90, onStart:report, data:"tween one"});

function report() {
    console.log(this.data);
}

[Lynx]

Right my mistake. 

And so how do I get the function to correctly log, I know how to write a function.  There is no documentation on report() ?

[jamiejefferson]

There is no documentation on report() because that's a custom function you create as a callback for the tween's onStart (which is documented). Jack called it report in his demo, but you can call it whatever you like - it's your function.

 

The code I provided is correct. If it's not working for you, please provide a demo of the code from my post not logging "tween one" to the console, and please make sure there are no errors in the console first.

 

If you are using Internet Explorer, the F12 tools must be open when the page loads to make sure everything logs correctly. IE does not save console history when the tools aren't open.

[Lynx]

I use FireFox which gives me an undefined error ?

 

[JsFiddle Code]

[Rodrigo]

Is this.data not logo.data, just like Jack and Jamie pointed before:

function report(){
  console.log(this.data);
};

[Lynx]

 

Is this.data not logo.data, just like Jack and Jamie pointed before:

function report(){
  console.log(this.data);
};

 

Awh ! Now it works, I thought I had to change the object from "this" to the name of my variable.  I assume regardless how many tweens I have the function reads them one after the other ?

[Rodrigo]

Yep.

 

See the Pen emBexW by anon (@anon) on CodePen