TimelineMax and fromTo

[niko]

Hi there!

 

I find there's something I'm not quite grasping using TimelineMax and fromTo, been trying all sorts of different variations, but shouldn't this work? Or am I missing something critical here?

 

timeline = new TimelineMax();
timeline.append(TweenMax.fromTo(element, 1, {css: {left: "100", top: "100"}}, {css:{left:"130", top: "130"}} ));

 

Appreciate all the help I can get, thanks!

[GreenSock]

Did you load the TimelineMax JS file? (well, unless you loaded the TweenMax js file which includes TimelineMax)

 

Can you zip up a simple example file and post it here so that we can see this in context? I don't see any obvious errors.

[Carl]

Hi and Welcome to the GreenSock forums.

 

The timeline code looks good.

 

Does elem have css position of absolute or relative?

 

Here is a working example of your code: http://jsfiddle.net/geekambassador/hXCND/

 

Just a note, your target values don't need to be strings (wrapped in quotes) but it isn't going to cause any harm.

 

//quotes necessary if specifying units (GSAP defaults to px in most cases)

TweenMax.fromTo(element, 1, {css: {left: "100px", top: "100px"}}, {css:{left:"130px", top: "130px"}} )

 

//less work does same as above (no strings)

TweenMax.fromTo(element, 1, {css: {left: 100, top: 100}}, {css:{left:130, top: 130}} )

 

If you want to specify relative values as we did in AS2/AS3 v11, you need to do it a little different

 

quotes and operators += or -=

TweenMax.fromTo(element, 1, {css: {left: "+=100", top: "+=100"}}, {css:{left:"+=130", top: "+=130"}} )[/CODe]
 
If you still have trouble, please let us know exactly what isn't working and provide your css and html too.
 
Thanks!

[dneckles]

Carl, good quest for you.. in your fiddle i replaced append with add, It played the first time, but it wouldnt play again when i hit restart. Is append what I should start use

[dneckles]

I forgot to add the fiddle http://jsfiddle.net/1hq0gw99/

 

These are the subtle intricacies I miss, I though append and add do the same thing. Time to read the docs again...

 

Update, looking at the docs it seems that append is not there.. 

 

Maybe i didnt look hard.. but thats more interesting now..since your restart button works with append but not add.

 

If append is deprecated then, I guess we use the restart command on the timeline.

Edited June 25, 2015 by alwayzambitious

[OSUblake]

Probably has something to do with the version being used, which is from 2012.

 

http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js

 

[Carl]

Yup, Blake is correct, that demo is using a super old version of TweenMax that pre-dates add().

 

append(), appendMultiple(), insert() and insertMultiple() from the old Flash days have all been deprecated as add() and a number of the methods like to(), from(), fromTo() can do the same thing which much less code

 

VERY OLD

timeline.append(TweenMax.fromTo(element, 1, {css: {left: "100", top: "100"}}, {css:{left:"130", top: "130"}}));

NOW

timeline.fromTo(element, 1, {left:100, top:100}, {left:130, top: 130});

http://jsfiddle.net/m75h77v4/1/

 

When adding tweens to timelines you really don't need add(), just use the timeline methods to(), from(), fromTo(), staggerFrom() etc.

 

add() comes in handy for adding things other than single tweens

//add a callback at 1.5 seconds
 tl.add(func, 1.5); 

 //add a label 2 seconds after the end of the timeline (with a gap of 2 seconds)
 tl.add("myLabel", "+=2");

 //add another timeline at "myLabel"
 tl.add(otherTimeline, "myLabel"); 

 //add an array of tweens 2 seconds after "myLabel"
 tl.add([tween1, tween2, tween3], "myLabel+=2"); 

 //add an array of tweens so that they are sequenced one-after-the-other with 0.5 seconds inbetween them, starting 2 seconds after the end of the timeline
 tl.add([tween1, tween2, tween3], "+=2", "sequence", 0.5);