Jump to content
Search Community

pause / steps in TimelineMax

okp test
Moderator Tag

Recommended Posts

Hi there,

 

I'm having issues trying to add pauses and next/prev buttons to control the animation.

I added pauses in the Timeline using addPause(), and addCallback to change the value of next label but i'm confused and it doesn't work...

 

Here's my simplified code:

var nextLabel:String="";
var tl:TimelineMax= new TimelineMax();

tl.addLabel("step1");
tl.addCallback(setNext,"step1",["step2"])
tl.append( new TweenMax(my_MC,2,{alpha:1}));
tl.append( new TweenMax(my_MC,1,{x:200}));
tl.addPause();
tl.addLabel("step2")
tl.addCallback(setNext,"step2",["step3"])
tl.append( new TweenMax(my_MC,2,{alpha:.5}));
tl.append( new TweenMax(my_MC,1,{x:400}));
tl.addPause();
tl.addLabel("step3")
tl.append( new TweenMax(my_MC,2,{alpha:1}));
tl.append( new TweenMax(my_MC,1,{y:200}));

function setNext(t):void{
	nextLabel=t;
}

my_NextButton.addEventListener(MouseEvent.CLICK,goToStep)

function goToStep(e:MouseEvent):void{
	tl.play(nextLabel)
}

I think i'm not doing things in the correct order.

 

Any advices ?

 

Thanks !

Link to comment
Share on other sites

Hi part of the trouble may be that your addPause() are added at the labels you are trying to play at.

 

So if you tell the timeline to go to a label and play, but there is an an addPause() there, well the playhead will jump to that label and then get stuck at the pause.

 

To get around this you could just place your labels a little bit past the addPause()

 

var nextLabel:String="";
var tl:TimelineMax= new TimelineMax({paused:true});


tl.add("step1") // add step1 label
  .to(my_MC,2,{alpha:1})
  .to(my_MC,1,{x:200})
  .addPause()
  .add("step2", "+=0.00001") //add new label an eeensy weeensy bit after the addPause()
  .to(my_MC,2,{alpha:.5})
  .to(my_MC,1,{x:400})
  .add("step3", "+=0.00001") //add new label an eeensy weeensy bit after the addPause()
  .to(my_MC,2,{alpha:1})
  .to(my_MC,1,{y:200});


my_NextButton.addEventListener(MouseEvent.CLICK,goToStep)


function goToStep(e:MouseEvent):void{
//jump to the next label and play
tl.play(tl.getLabelAfter())
}

Be sure to test the code above with the latest version of GSAP 12.1.4

http://www.greensock.com/?download=GSAP-AS3

 

You will notice I'm not using append(), or addLabel(). They have been deprecated.

Be sure to look at the add() and to() methods in the latest TimelineMax docs

 

Note, the above solution won't work so well in reverse.

 

I'm not exactly sure how you want the animation to play from section to section moving forward and in reverse... but I would suggest that instead of placing addPause() in your timeline you might just use labels in conjunction with TimelineMax's getLabelAfter() and getLabelBefore() methods.

 

you can do things like tl.tweenTo(tl.getLabelBefore()) // tweens to previous label

 

or tl.tweenFromTo(someLabel, someOtherLabel)

 

Labels can be very powerful in this regard.

 

Also, getLabelsArray() gives you an Array of labels which might make it even easier to figure out where certain labels exist in relation to each other.

 

In order to offer a thorough solution it would be helpful to understand the following:

 

-if you hit next while the animation is playing forward should it jump to the next label and then play from that label to the next next label?

 

-if you hit previous while playing forward should it jump to the previous label and then reverse to the label before that label? or just reverse from the current position to the previous label?

 

-if you hit previous when the playhead is at the beginning what should happen? should it jump to the last label and the reverse to the second to last label?

 

I know your question seems simple, but there are actually quite a few conditions to account for. Difficult to suggest a solution that fits all scenarios without more details.

Link to comment
Share on other sites

Hi Carl,

 

Thanks for the reply.

I knew for sure it was a simple question, but which required a more complicated answer, given the amount of different solutions I tried.

 

You are right, the trick to add the label just after the pause (a fraction of second) works fine.

 

When hitting Next,  tl.play(tl.getLabelAfter()) jumps to the correct label and plays.

 

However, when hitting Previous, i'd like to go to the label before the getLabelBefore() value.

e.g., when playing from step2 to step3 (= step2 animation), i'd like to go to step1.

 

So I did that :

tl.play(tl.getLabelBefore(tl.getLabelTime(tl.getLabelBefore())-.1))

Not sure if it's a good way...

Link to comment
Share on other sites

:)

 

You know I was on my way to advising something very similar but since it seemed a bit complex and overwhelming, I figured I'd get more info out of you before spinning our wheels in the wrong direction.

 

Yes, ultimately getting the labelBefore() the label before is what you need and if that works for you, I'd stick with it. The other approach I had in mind involved using getLabelsArray(), finding the index of the next or previous label and then jumping to the 1 after that. Ultimately it serves the same purpose.

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.
×
×
  • Create New...