Jump to content

Mike D

Advice on best way to gracefully handle interrupted 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 guys, Thanks for an amazing product.


I wanted to get some advice on the best way to handle what seems to be a recurring issue for me. I always try to OOP all my animations/tweens as much as possible. One issue i keep running into that I haven't gracefully figured out how to handle is when a tween is not completely finished and another tween on the same object fires.


Normally in jQuery using animate(), I would just chain in .stop(false,true) to basically stop the tween right there, clear the animation queue and then start the newly fired tween using the element's current state as the starting properties of the new tween.


Right now im sniffing around the invalidate() method as possibly being a solution for this but am not totally sure. Thanks in advance!

Link to comment
Share on other sites

That's a common problem with many animation systems indeed which is why GSAP automatically handles it under the hood for you by default. That's what the "overwrite" special property is for, and it's "auto" by default which means that the engine will automatically find other concurrent tweens of the same object and kill only the individual properties that overlap. And that overwrite logic doesn't run until the tween renders for the first time, so if you have a delay, it won't cause any problems. 


For example, if you've got a "top" tween that's halfway done and you start a "left" tween on the same object, technically there's no overlap, so they should both be able to run without any problems. If, however, you've got a tween that's handling "top" and "left" of an object and then while it's mid-tween, you create another tween of that same element's "top", that new tween will find the old one and kill just the "top" portion of it, allowing "left" to continue. 


If you prefer to immediately kill all other tweens of the same target when you create a new tween, you can simply set overwrite:"all" like:


TweenLite.to("#myElement", 1, {top:300, overwrite:"all"});

There are a few other modes you can choose from as well - read about those in the TweenLite or TweenMax docs, listed under the "overwrite" special property. Typically, however, "auto" is what most developers want and it's the default, so you don't need to do anything. 


Again, this is one of the unique features of GSAP (at least I haven't seen other systems that have good conflict management algorithms in place - most either let the tweens run and fight or completely kill new tweens with old ones).


Were you running into problems or did you just want to double-check and see if there was a need to do something to prevent conflicting tweens? 

Link to comment
Share on other sites

Hi Jack,


Thanks for the quick response. Totally makes sense, so the issue must be how im sequencing my calls then. I have a lot of flipping elements out of the viewport (e.g. top: -999%) and then back in the viewport tweening opacity via classnames.


I'll take a closer look at my timing sequence as I'm sure the issue must be there. Thanks again for the amazing work on this library and the stellar support. I just signed up for shockingly green btw.


Thanks - Mike D

Link to comment
Share on other sites

Congrats on joining the club! Great to have you on board. We appreciate the support. 


Also, please make sure you're using the latest 1.9.3 update of GSAP JS because we recently (TODAY) released it and it contains a rewrite of the overwrite routines for className tweens (those are particularly thorny because inline styles must be used during the tween and then removed after it's done, or at the beginning if you rewind). 



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.