addCallback isn't inserted but runs at end tl

[Guest Toni]

Hi,

 

Package: GSAP 12 AS 
I'm trying to use the addCallback function like this:

public function Main() 
{ 

// instantiate new TimeLineLite
tl = new TimelineMax({}); 

tl.append(TweenMax.from(optie_1, .5, {alpha:0, ease:Back.easeOut}));

tl.addCallback(swapOne, tl.duration);

tl.append(TweenMax.from(of, .5, {alpha:0, ease:Back.easeOut})); 

tl.append(TweenMax.from(optie_2, .5, {alpha:0, ease:Back.easeOut}));

tl.append(TweenMax.from(actie, .5, {alpha:0, ease:Back.easeOut})); 

} 

function swapOne(){
trace ("addCallback works");
tl.appendMultiple([ TweenMax.to(beeld_1, .5, {alpha:0}),
TweenMax.to(beeld_2, .5, {x:180, alpha:1, ease:Back.easeOut})
], .2, TweenAlign.NORMAL, 1);
}

 

Problem is that addCallback  runs after the other tweens.

I've read and watched tuts but can''t find what i'm doing wrong.

 

What concept am i missing?

 

Thanks in advance

 

T.

 

[Carl]

Hi and welcome to the GreenSock forums.

 

Please provide a simplified FLA so we can look.

 

If you are using version 12, tl.duration should be tl.duration() - a method not a property.

I would think that you would be getting an error from that.

 

When providing the file please remove and code and assets that aren't necessary to replicate the problem and be sure to zip your file first.

 

thanks

[Guest Toni]

Hi Carl,

 

Thanks for the quick reply

 

 

I 've  the files and code as requested.

However,  I cant seem  to attach the .rar

I pressed 'my media' but it doesn't work

 

What am I overlooking?

 

T.

[Carl]

Use "more reply optionns" and "choose files"

You should see a giant paper clip.

[Guest Toni]

xample_addCallback.ziphehe, got it

 

 

Hope it's clear what I want to achieve.

 

Some basic concepts of Greensock I understand, 

However putting it all together is still a strange bird to me.

 

If you could give me some pointers, that would be fantastic.

 

T.

 

xample_addCallback.zip

[Carl]

I think some of the trouble may be that you are using the older v11 syntax with the new v12 version of GSAP.

 

Honestly, I'm not exactly sure what you expect the code to do, but to start slowly, lets not worry about what the callbacks are supposed to do, but rather make sure they are running at the right time. I removed the tweens from the callbacks and added some simple traces.

 

Test the following code (save your code first)

  package  
    {  
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import flash.display.MovieClip;


        public class Main extends MovieClip  
        {  


public var tl:TimelineMax;


            public function Main() 
            { 


tl = new TimelineMax({}); 


// animation 


tl.append(TweenMax.from(option_1, .5, {alpha:0, delay:2}));


tl.addCallback(swapOne, .3);


tl.append(TweenMax.from(option_2, .5, {alpha:0, delay:2}));


tl.addCallback(swapTwo, .3);


            } 
function swapOne(){
trace("swapOne called at time " + tl.time())

} 


function swapTwo(){
trace("swapTwo called at time " + tl.time();
} 


        } // end class
    } // end package 

Notice that both addCallback()'s fire at the same time, 0.3 seconds into the timeline.

 

 If you mean for the callbacks to fire 0.3 seconds after the previous tweens end, then you can use a relative value for the position parameter like so:

 

tl.addCallback(swapOne, "+=0.3");

tl.addCallback(swapTwo, "+=0.3");

 

You can read about the position parameter in the addCallback docs

 

So currently your code is firing the callbacks exactly when they are supposed to. If using a relative value as shown above does not produce the desired results please explain exactly when they should run.

 

After that is settled I will show you how you can greatly reduce the amount of code you've written using the new v12 methods and syntax.

 

 

 

 

 

[Guest Toni]

Thanks!

 

I see my mistake now:

 

Absolute values as used here (.3) look at the main timeline. Right?
 

I've included an infographic to clarify what I want to achieve.

If you need more info, i'll be happy to provide you with whatever you need

 

Eager to see how you can reduce the code

 

T.

 

animatiesequence-infographic.pdf

[Carl]

Thanks for the infographic, very nice and helpful.

 

Here is the condensed version of the code using the new from() and call() methods of TimelineMax

 

    package  
    {  
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import flash.display.MovieClip;


        public class Main extends MovieClip  
        {  


public var tl:TimelineMax;


            public function Main() 
            { 


tl = new TimelineMax({}); 




tl.from(option_1, .5, {alpha:0}, 2);//inserted at an absolute time of 2 (instead of using delay)
tl.call(swapOne, null, "+=0.3") //0.3 seconds after the end of the timeline
tl.from(option_2, .5, {alpha:0}, "+=2") // 2 seconds after the end of the timeline
tl.call(swapTwo, null, "+=0.3");//0.3 seconds after the end of the timeline


            } 
function swapOne(){
trace("swapOne called at time " + tl.time())
} 


function swapTwo(){
trace("swapTwo called at time " + tl.time())
} 


        } // end class
    } // end package 

Notice that I'm using relative times for the callbacks.

 

I will now modify the code so that the timeline does what your infographic shows

 

Stand by.

[Carl]

I''m not really sure why you were using callbacks originally. It seems now you understand why they were firing when they were (absolute time). I want to point out that even if they were firing at the right time, they would have been adding tweens to the end of the timeline (with appendMultiple) and I'm not so sure that is where you wanted them.

 

Regardless, I took a crack at building a the sequence strictly as I saw it described in the infographic. I attached a new FLA as I moved some things around and added new things (item3 / option3)

 

Here is the code:

 

tl = new TimelineMax({}); 

tl.from(option_1, .5, {alpha:0, x:-100});
tl.from(item_1, .5, {alpha:0, x:234}, 0);

tl.add("item2", "+=2") //add item2 label 2 seconds later
//following 3 tweens all happen at the item2 label
tl.to(item_1, 0.5, {x:234}, "item2")
tl.from(option_2, .5, {alpha:0, x:-100}, "item2");
tl.from(item_2, .5, {alpha:0, x:234}, "item2");

tl.add("item3", "+=2") //add item3 label 2 seconds later
tl.to(item_2, 0.5, {x:234}, "item3")
tl.from(option_3, .5, {alpha:0, x:-100}, "item3");
tl.from(item_3, .5, {alpha:0, x:234}, "item3");

Please take a look at the to() and from() methods in the TimelineMax docs. You'll see this methods are much easier to write then tl.append(TweenMax.to(something, 2, {x:200})).

 

 

 

carl-sequence-CS5.zip

[Guest Toni]

This is it!

 

I was using callbacks and appendMultiples to control when a certain tween should fire.

I thought I could use appendMultiple to create overlapping tweens and use addCallback to let this overlap overlap another tween.

 

I see now that the position parameter in combination with labels is what i should be using instead.

 

Will be reading up on the to() and from().

 

Could you provide me with a link or example when I should use appendMultiple.

I understand you can use it for nested timelines, but in this case it's clearly not the right way to go.

 

I want to better understand the difference and be able to identify when I should use what method 

 

T.

[Carl]

appendMultiple() is deprecated so you should really never use it. We only support it now so that people don't have huge migration problems when coming from Flash.

 

Instead you should use add() (which works the same way).

 

To get the same behavior as appendMultiple() with add() you would do:

//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);

In the example above, tween1, tween2, tween3 could also be nested timelines. Basically you would use add() in this fashion if you want to add multiple animations either at the same time or with staggered start times.

 

Frankly, I personally don't find myself using this method this way in my day-to-day work. Its a powerful technique when you need it, I just don't find myself needing it all that much.

[Guest Toni]

Ah ok

 

Thanks for the update and advice!

 

I find myself lost sometimes with all the posibilities and concepts.

Time for some more tutorials.

 

T.