Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vahid-Designer

Adding pause when Animation is positioned at a lable

Recommended Posts

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.

 

 

Link to post
Share on other sites

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.

Link to post
Share on other sites

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; 
    }
});
  • Like 3
Link to post
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.

×