Hello everyone at GSAP forum.
I appreciate any help with my problem I've been solving some time. There are few things I can't understand.
This is my problem:
Because I need to use some Tweens or Timelines repeatedly I decided to create functions with these Tweens/Timelines. These functions are appended to Timeline by .call() or .add() (both doesn't works) like this:
var myTimeline = new TimelineMax()
.add(down)
.call(up)
.add(TweenMax.to("box3", 1, {autoAlpha:0.2, scale:0.8, ease: Back.easeOut} ))
----------
function down() {
var downTween = new TimelineMax()
.add(TweenMax.to("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} ))
.add(TweenMax.to("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} ))
}
-----------
No function in myTimeline waits for previous to complete - everything plays together - I'm not used to this behavior. I don't wanna use labels or something like that - I need them to chain (first one ends - second starts) as usualy when I add only tweens into timeline.
Well, I tried to resolve my problem by some tricks but meet even more problems
1) I tried to use .pause() and then .resume() or .play() in my functions
function down() {
myTimeline.pause();
var downTween = new TimelineMax()
.add(TweenMax.to("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} ))
.add(TweenMax.to("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} ))
}
myTimeline.resume();
2) I tried to use onComplete
function down() {
myTimeline.pause();
var downTween = new TimelineMax(onComplete:myTimeline.resume())
.add(TweenMax.to("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} ))
.add(TweenMax.to("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} ))
}
I don't know why nothing works. What do I do wrong? Can anybody give my some explanation, please?
Thanks a lot in advance.
Peter
