Avargas Posted August 12, 2020 Share Posted August 12, 2020 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 Link to comment Share on other sites More sharing options...
Richard1604 Posted August 12, 2020 Share Posted August 12, 2020 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() Link to comment Share on other sites More sharing options...
akapowl Posted August 12, 2020 Share Posted August 12, 2020 @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() 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 12, 2020 Share Posted August 12, 2020 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() 2 1 Link to comment Share on other sites More sharing options...
akapowl Posted August 12, 2020 Share Posted August 12, 2020 Caught me on that one, @ZachSaucier 😄 2 Link to comment Share on other sites More sharing options...
Avargas Posted August 12, 2020 Author Share Posted August 12, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 12, 2020 Share Posted August 12, 2020 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now