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() ?

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 ?

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 !

Oh ! That explains why in the first example rotate works even though it's not declared in the CSS, it is played it just begins at 0, makes sense !

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 ?

You are saying that .to() start values are derived from the CSS property, but you don't need to declare a {skew} or a {rotation} or a {translate} in the CSS if you are going to use all those, you only need to declare one, for example {skew} in the CSS then tween the rest of the values with GSAP, correct ? Also, what makes this work, but not this ?

jsfiddle.net/WildWind/j5uy8p6a/3/ I was wondering why the scale doesn't work, shouldn't it go from small to big, or big to small at the end in scale ? The problem is all this time is the documentation use of the word of target in a vague sense, it wasn't until it was mentioned that target regardless what direction is being read is from the original CSS values, I think this needs to be change, a simple in brackets (the CSS original values) would suffice in the documenation. As for the explination on how objects and functions work, I am aware of parameters in functions and objects in JS although I haven't used objects much, I have a somewhat understanding of them. Thanks to Diaco I was simply loading the wrong CDN, Que Sera, Sera !

If the values begin in the CSS property then how come this isn't work, the value is at 0 for skewX & Y ? I know you can offset the tweens so they are not beginning at the same time, the above example exempts such a need.

The start values are all what is in the CSS style, with the exception of FromTo(), correct which has the start and end values combined and is not reading from the CSS style value ? I want to make sure that is exactly how it works ? All this time when you were saying target you were meaning the CSS values, if so that is where thing can get confusing, it should be noted as such rather then writting target !

The start value of a to() tween is from value in the CSS property correct, but the start value from a fromTo() tween is not from the CSS property instead from the toVars, correct ? When Jamie posted his response in post #17 I began focusing on GSAP as his explination was well put, I still had questions remaning, then the thread went into as I mentioned in my previous post (Page 2), how JS works and it completely derailed. This is tweening with code and with every frame work one must understand how it works, now that I'm getting an understand although there still remains a few lingering questions for those who helped move the thread along. I'm sure these two threads will help those new to GSAP !

What do you mean by this ?

That helps, but doesn't explain that Carl used three sets with fromTo() and that you can use more then one set with .to() how many sets, sets meaning values in parenthesis can you use with .to() and how many sets can you use with fromTo() ? From my understanding fromTo() tweens from each set within fromTo() while To() tweens one after another, as I mentioned, how many sets can you have ?

Suppose I wanted to rotate something between -90 deg and 90 deg, what would be wrong with the following code, besides that the values are not -90 and 90 ? var logo = new TimelineMax(); logo.fromTo(".proxylogo",24,{rotation:-45, rotation:4},{rotation:-34,rotation:56}) logo.to(".proxylogo",24,{rotation:-35,rotation:60},{rotation:12,rotation:67});

You can pass more then one var; logo.fromTo(".proxylogo",24,{skewY:5, skewX:23, rotation:12, rotation:4},{skewY:40, skewX:55, rotation:56}); When using fromTo() with to() what is the correct chaning ?

Shouldn't this tween work ? logo.fromTo(".proxylogo",24,{skewY:12,skewX:23},{rotation:34,rotation:56:}); I can't have: .to() .to() .fromTo(); .to(); ?

I have watched mostly all of the videos and read the documentation on GSAP before even asking the questions I have asked, and it still wasn't that clear. The .to() tween moves down the chain from one element to another, correct ? Your explination on how the fromTo() sounds as if it carries on from the .to() tween, which doesn't sound right ? logo.fromTo(".proxylogo",24,{skewY:12,skewX:23},{rotation:34,rotation:56:}); I tried mixing a fromTo() to a to() didn't work, removed all the .to() and strictly added fromTo() and I get an error on the code above ?

I wrote the code up at 6am that could explain the fromTo() error If .to() goes from one sequence to the next, what does .fromTo() do go from the end of one sequence to another ? Two tween with skewX:50 which gets overwritten the last value or the first value or both ?

The problem relates to my page, I did get JSFiddle to work ! Is the last FromTo() working or what have I done wrong ? It is safe to assume they are all running at the time line in the timeline and now must be offset !

I don't use CodePen, here another link. Placing the code in a document ready isn't working, placing it outside a document ready isn't working. It may be a syntax error, obviously when you end most statements in JS you use a semi-colon but with GASP when I use a semi-colon something goes wrong, so then I remove it, then I add it again, then I remove it, arghh !

Nope, it isn't working ! I mimicked your code as well !

I have a question for you; should this work ? $(document).ready(function(){ var logo = new TimelineMax (); logo.to(".proxylogo",24,{skewY:"45px",skewX:"50px"}) };

I'll make an animated GIF in a new thread !

Using the semi-colon on each line ends the animation, rather then sequencing. I watched all the videos and directions, I thought I use .to() most of the time. When do I use .fromTo() ?

I'm getting one error. I mimicked the code provided by Jamie. If I removed the TimelineMax() command, I run into the problem that as mentioned one overrides the other, you'd think I'd see the class rotate 160 on X and 200 on Y atleast, apparently I don't ? When I add TimelineMax() it doesn't work either ? $(document).ready(function(){ var logo = new TimelineMax (); logo.to(".proxylogo",24,{skewY:"1px",skewX:"2px"}); .to(".proxylogo",12,{skewY:"34px",skewX:"12px"}); .to(".proxylogo",34,{rotation50},{rotation:90}, "-=5"); .to(".proxylogo",60,{skewX:"50px"}); .to(".proxylogo",23,{rotation:-25,rotation:32}) .to(".proxylogo",12,{rotation:160,rotation:200}); };

I may have to show a CodePen demo, not yet I'd like to know what I'm doing wrong, even if it's a syntax problem that the following isn't working even after doing some clean up to the code ? I feel as though I may be getting closer to understanding but I'm still riding over some bumps, then again that last statement may be all wrong ! $(document).ready(function(){ var logo = new TimelineMax (); logo.to(".proxylogo",24,{skewY:"1px",skewX:"2px"}); TweenlineMax.to(".proxylogo",12,{skewY:"34px",skewX:"12px"}); TweenlineMax.to(".proxylogo",34,{rotation50},{rotation:90}, "-=5"); TweenlineMax.to(".proxylogo",60,{skewX:"50px"}); TweenlineMax.to(".proxylogo",23,{rotation:-25,rotation:32}) TweenlineMax.to(".proxylogo",12,{rotation:160,rotation:200}); };