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.