Animation after click

[Avargas]

Hello, I am new to GSAP and had a question. I made a timeline that I posted above. I wanted the timeline to stop after the second tween then after a click of the elements have the two remaining tweens occur. I was wondering if this was possible on the same timeline or would I have to create another one? Thank you. 

See the Pen yLOYqjX by avar1207 (@avar1207) on CodePen

[Richard1604]

Looking at the docs I see the timeline() method has addLabel() and addPause() methods So your requirement ought to be achieved if you create a label and program a pause on the timeline with the button being set to do a resume()
 

 

 

[akapowl]

@Avargas

 

That is absolutely possible with the same timeline.

As @Richard1604 mentioned there is the nifty .addPause() method for timelines.

 

You could simply just throw it in after your first two tweens, add an eventlistener for the click-event onComplete of your second tween and run a timeline.resume() when that chosen element is clicked. Adjust the timing for your third tween, so it doesn't start two seconds late, et voilá:

Your timeline resumes on click.

 

 

See the Pen 6dc677cca42d34d2d20b3e589f94e4c2 by akapowl (@akapowl) on CodePen

 

 

Check the docs for more information and all the other beautiful stuff that GSAP gives to control your animations with ease.

https://greensock.com/docs/v2/TimelineMax/addPause()

 

 

[ZachSaucier]

3 minutes ago, akapowl said:

https://greensock.com/docs/v2/TimelineMax/addPause()

I think you meant to post the v3 version, right? https://greensock.com/docs/v3/GSAP/Timeline/addPause()

[akapowl]

Caught me on that one, @ZachSaucier 😄

[Avargas]

The examples that I noticed have been done with a button as mentioned by @Richard1604 @ZachSaucierIs it possible to do this with a click of the actual element?

[ZachSaucier]

1 minute ago, Avargas said:

Is it possible to do this with a click of the actual element?

Sure, just apply the click event listener to the element that you want it to be on.