How to make a tween works only one time (on click event)

[soheil22]

Hi there.

 

I was working on a tween and after finishing it I decided to put it into an onClick function,

 

my problem is I only want it to work once after clicking on the button,

I know I have to use the pause() or kill()  method,

but my problem is 

where should i pause it ?

$('#home').click(function(){
            
            //"Context"  animation
            var secPageh1 = document.getElementById("secPageContext");
            var tm = TweenMax.from(secPageh1,1.5,{left:350,autoAlpha:0,delay:0.3,ease: Power2.easeOut});
	}); 

 

this is my onClick function but I dont know how to make it pause after 1 time running.

 

Thank you

[Jonathan]

Hello and Welcome to the GreenSock Forum!

 

This looks more of a question about jQuery then the GSAP API.

 

But since you are using jQuery then you can use the jQuery one() event handler method. It will only run one time for your event handler..

 

http://api.jquery.com/one/
 

/* only runs once when clicked */
$('#home').one("click", function(){
            
      //"Context"  animation
      var secPageh1 = document.getElementById("secPageContext");
      var tm = TweenMax.from(secPageh1,1.5,{left:350,autoAlpha:0,delay:0.3,ease: Power2.easeOut});

}); 

If you are still having issues please create a codepen demo example so we can see your code in context.