Jump to content
GreenSock

niko

TimelineMax and fromTo

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 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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 2 years later...

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

Link to comment
Share on other sites

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 by alwayzambitious
Link to comment
Share on other sites

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);
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.
×