Starting TweenMax from an onClick event instead of 'autoplay'

[tomekpilot 1 Likes (Newbie)]

Greetings!

I have my first TweenMax doing everything i need, (including interaction with externals controls/buttons) but I'm drawing a blank as how to prevent it from 'autoplay'

 

 

My relevant 1liner:

var tl =  TweenMax.to(point, currentSpeed, {css: { left: "95%"}, repeat:repeat, yoyo:true, repeatDelay:0, ease:Linear.easeNone});

... so for example my 'pause' button works fine:

$('#pause').click( function(){tl.pause();});

... how do I make it start only when I press my $('#start') button? 

I figure I missed something simple, hence my apologies and thanks in advance.

 

[Diaco 1,948 Likes (Superhero)]

Hi tomekpilot 

 

You need to add paused:true in your Tween Vars , pls try this :

var Anim = TweenMax.to( "#foo" , 1  ,{ ....... , paused:true }) ;

$('#play').click( function(){  Anim.play()  }) ;

pls check this out , same method with Timeline :

 

See the Pen Wbyazp by GreenSock (@GreenSock) on CodePen

[tomekpilot 1 Likes (Newbie)]

... ahhhh, that's what what I meant by 'something simple'.Thanks! works like magic now.

[Jonathan 5,176 Likes (Superhero)]

To add to Diaco.AW's great advice.. here is how to start with timeline paused using TimelineMax / TimelineLite:

var Anim = new TimelineMax({paused:true});

Anim.to("#foo", 1, {left: "95%"});

$("#play").click(function(){ Anim.play() }) ;

:

Hope this helps!

[AML Group 0 Likes (Newbie)]

What if I'm not using jQuery?

[OSUblake 9,990 Likes (Superhero)]

Same thing. You just need to type a few extra characters

var Anim = new TimelineMax({paused:true});

Anim.to("#foo", 1, {left: "95%"});

document.querySelector("#play").addEventListener("click", function(){ Anim.play(); });

[Efficacy IO 0 Likes (Newbie)]

Hi,

 

Does anyone know how to change this from targeting...

 

#foo

 

to targeting...

 

$(this).closest('.foo')

 

so that I'm animating the nearest .foo ancestor of the clicked element?

 

Thanks!

[OSUblake 9,990 Likes (Superhero)]

Just add an animation to your click function. Here's an example with a bunch of nested foo classes. It doesn't use jQuery, but it's the same concept.

 

See the Pen MwRgrw by osublake (@osublake) on CodePen