Adding pause when Animation is positioned at a lable

[Vahid-Designer]

Hi all.

I have a problem with pausing a point of TimeLineMax.

 

I have an animation queue like this:

var tl= new TimelineMax({paused:true});
var tm1=tl.set(".circle-f:nth-child(7)", {autoAlpha:0,scale:0,backgroundColor:'#00E5FF'})
.addLabel("mystart")
.to(".circle-f:nth-child(7)", 0.3, {autoAlpha:1,scale:0.2,backgroundColor:'#00E5FF'})
.addLabel("mystop")
.to(".circle-f:nth-child(7)", 0.3, {scale:1,backgroundColor:'transparent'}) ....

The problem is when I want to reverse timeline from "mystop" to "mystart".

I do it easily by :

if(//for example: scrollTo<=500)
tm1.tweenFromTo("mystop", "mystart");

But this animation when will be run that condition above is true. Actually, the animation will be run from mystart to at the beginning point of the timeline when the condition is true. I want to run the animation once, only.

So I have to kill that:

if(//for example: scrollTo<=500)
tm1.tweenFromTo("mystop", "mystart");
tm1.kill(null, ".circle-f");

But it kills all animation of ".circle-f" on other conditions that I don't want to happen it. The question is is there any way by other condition I can turn off the kill or return the animation has been killed.

And there is a way to make me don't use of kill?

 I tried with addPause but I couldn't understand when I use it like this:

var tl= new TimelineMax({paused:true});
var tm1=tl.set(".circle-f:nth-child(7)", {autoAlpha:0,scale:0,backgroundColor:'#00E5FF'})
.addPause()
.to(".circle-f:nth-child(7)", 0.3, {autoAlpha:1,scale:0.2,backgroundColor:'#00E5FF'})
.addLabel("mystop")
.to(".circle-f:nth-child(7)", 0.3, {scale:1,backgroundColor:'transparent'}) ....

How can I call it when I am calling its playing? Like this?

tm1.play();
tm1.addPause("mystop");

Please let me know and help me if it's possible.

 

 

[ZachSaucier]

Hey Vahid,

 

Could you try making a minimal CodePen demo of the issue you're having? It would help us help you better. You can learn how to do so here http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

[Vahid-Designer]

Hey Vahid,

 

Could you try making a minimal CodePen demo of the issue you're having? It would help us help you better. You can learn how to do so here http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

Hi Zach

I know how I create a codepen but Actually I couldn't simple it. If I want to rewrite, it will take a long time. I just want to have a pause step in my TimelineMax that when a condition is getting true , animation stops at a label and also if the condition gets true again it stays pause, still. but if another condition happened it can be resumed or reversed.

[Diaco]

Hi Vahid-Designer 

 

i don't know what's your scenario , but you add / remove pause from timeline easily with tl.addPause('label');     and     tl.removePause('label');

 

so you can do something like this :

var tl = new TimelineMax()
    .to('.red',5,{x:100})
    .add('StopPoint')
    .to('.red',5,{x:200});

var toggle=1;

document.querySelector('.red').addEventListener('click',function(){
    if(toggle){
        tl.addPause('StopPoint'); toggle=0; 
    }else{
        tl.removePause('StopPoint').play(); toggle=1; 
    }
});