Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Problem Pausing and Killing Specific Tweens

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, this is my first forum post and I'm hoping to get some help with an issue and learn more about GSAP.


The project I'm working on is replicating a video game character select screen where the user can navigate through 3 characters (using the left and right arrow keys) which have idle animations until selected where an active animation will play on the selected character. I am doing this by using sprite sheets and SteppedEase in TweenMax.


I have the navigation and idle and active animations on document ready working. The problem I am having is when switching to the next character. The way I believe it should work (with limited knowledge of GSAP) is to kill the idle animation on the element that's to be selected and return its progress to 0 before adding a new active tween to the element. The main issue at the moment is I cannot seem to kill the animation of the specified object. I have tried using TweenMax.killTweensOf() but this does not reset the progress and when the active tween is added it starts on the frame from which the idle animation was killed.


I have recreated a demo with basic sprite sheets (note: there may be an initial delay in loading the sprite sheets in CodePen because I am using Dropbox as a makeshift CDN) and labeled the code I am having issues with with the comment "start here". There are two areas with this comment, one for killing the active tween and one for killing the idle tween. 


What I am asking for specifically is help in killing and pausing (pause(0)) the tweens in question.


The way you will know if this works is if you wait until the sprite sheet in the boxes are at a stage past "1" in their images and then navigation to another box, the sprite sheet of the box you navigated away from should return to the first stage which should display the number "1"  and stop the tween, the box you navigate to should also return to the first stage and stop the tween, the 3rd box should continue its tween.


I hope this doesn't read like an essay but I wanted to try and give as much detail as possible on what I need help with and what I've tried so far. 


Again any help / guidance will be appreciated as I've been banging my head against my keyboard for the past few days.





See the Pen ooWGrL?editors=0010 by christopherduffy (@christopherduffy) on CodePen

Edited by christopherduffy
clarified part of the text
Link to comment
Share on other sites

Have you tried tween.seek(0).pause() ?


See the Pen gXRBBw by Sahil89 (@Sahil89) on CodePen


Just for future queries, you will get answers a lot quicker if you provide a demo with reduced code that shows your specific problem.

  • Like 2
Link to comment
Share on other sites

Thanks for the response. I'll keep future demos on point.


The issue is that I need to pause a tween on a specific element while the other elements using the same tween continue, which .seek() doesn't allow.



Link to comment
Share on other sites

It should work as long as you are not using same tween to animate all elements. You can loop through elements and create individual tween for each one. See if it helps otherwise I will take a look at it later.

Link to comment
Share on other sites

That is the issue. I am only using two tweens, active and idle, in order to reduce the amount of code needed.


At the moment a combination of killTweensOf() and set() to reset the position seems to be working in my demo. I will try applying this to my main project after work tomorrow.


If this doesn't work I will try your method of creating individual tweens.


Thanks for the advice Sahil.

Link to comment
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.