Jump to content
GreenSock

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

New 'overwrite' idea

Recommended Posts

I'm half afraid to suggest this because it probably exists and it just didn't read the docs close enough, but I think it'd be really useful to have an overwrite mode that checks the assigned value of a tweened property, and doesn't overwrite if the value of one tween matches the value of another conflicting tween. For example, if you have 1 sec tween to Y position "10", and during that tween you call another 1 sec tween, also to Y position "10", the second tween could be ignored with this proposed overwrite mode. Could be useful when multiple UI elements effect the same targets and you don't want a stutter caused by successive tweens with unchanged property values. Hope that all makes sense.

Link to comment
Share on other sites

Hi and thanks for the idea. We always enjoy hearing about features that our users can use. 

 

We currently have 6 overwrite modes and from what we can tell from the thousands of support issues we have seen... it is extremely rare that anyone needs anything other than "auto" or "none" :(

So it's unlikely that we would add another that checks if end values are the same.

 

However, if you have some time, I think you will find this topic on "additive animations" interesting: http://greensock.com/forums/topic/12573-additive-animation/

Read it thoroughly and check out all the demos / videos that are referenced by Blake.

 

When using an additive animation and your example the new tween wouldn't be ignored or the previous one overwritten, the engine would smoothly blend them together. It's definitely something that is on our radar.

 

Thanks again for the input and for being a club member!

  • Like 2
Link to comment
Share on other sites

Here is a list of the available overwrite modes:

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/

 

overwrite : String (or integer) - Controls how (and if) other tweens of the same target are overwritten. There are several modes to choose from, but "auto" is the default (although you can change the default mode using theTweenLite.defaultOverwrite property):
  • "none" (0) (or false) - no overwriting will occur.
     
  • "all" (1) (or true) - immediately overwrites all existing tweens of the same target even if they haven't started yet or don't have conflicting properties.
     
  • "auto" (2) - when the tween renders for the first time, it will analyze tweens of the same target that are currently active/running and only overwrite individual tweening properties that overlap/conflict. Tweens that haven't begun yet are ignored. For example, if another active tween is found that is tweening 3 properties, only 1 of which it shares in common with the new tween, the other 2 properties will be left alone. Only the conflicting property gets overwritten/killed. This is the default mode and typically the most intuitive for developers.
     
  • "concurrent" (3) - when the tween renders for the first time, it kills only the active (in-progress) tweens of the same target regardless of whether or not they contain conflicting properties. Like a mix of "all" and "auto". Good for situations where you only want one tween controling the target at a time.
     
  • "allOnStart" (4) - Identical to "all" but waits to run the overwrite logic until the tween begins (after any delay). Kills tweens of the same target even if they don't contain conflicting properties or haven't started yet.
     
  • "preexisting" (5) - when the tween renders for the first time, it kills only the tweens of the same target that existed BEFORE this tween was created regardless of their scheduled start times. So, for example, if you create a tween with a delay of 10 and then a tween with a delay of 1 and then a tween with a delay of 2 (all of the same target), the 2nd tween would overwrite the first but not the second even though scheduling might seem to dictate otherwise. "preexisting" only cares about the order in which the instances were actually created. This can be useful when the order in which your code runs plays a critical role.

Happy Tweening! :)

  • Like 1
Link to comment
Share on other sites

Hi and thanks for the idea. We always enjoy hearing about features that our users can use. 

 

We currently have 6 overwrite modes and from what we can tell from the thousands of support issues we have seen... it is extremely rare that anyone needs anything other than "auto" or "none" :(

So it's unlikely that we would add another that checks if end values are the same.

 

However, if you have some time, I think you will find this topic on "additive animations" interesting: http://greensock.com/forums/topic/12573-additive-animation/

Read it thoroughly and check out all the demos / videos that are referenced by Blake.

 

When using an additive animation and your example the new tween wouldn't be ignored or the previous one overwritten, the engine would smoothly blend them together. It's definitely something that is on our radar.

 

Thanks again for the input and for being a club member!

Carl, this Additive Animations topic was very relevant. Takes what I was thinking of to a much more sophisticated level, but definitely on point! Thanks for sharing.

Here's a codepen that illustrates a case where my proposed overwrite mode could be useful: 

See the Pen yJAzQv by creativeocean (@creativeocean) on CodePen

 

If it's unlikely to see an overwrite mode like this, then the logic for checking end values needs to be written separately. Is there a handy method for reading the end values (thinking maybe there's a way to use _gsTweenID to inspect Tweens of a given target)?

Link to comment
Share on other sites

Thanks for the demo. Not doubting there is a time when that behavior would come in handy.

Yup, you can use getTweensOf(target) to see if an object is being tweened and then you can asses the end y value like:

 

function click(e){
  console.clear();
  var tweens= TweenMax.getTweensOf(".circle", true);
  var endY;
  if(tweens.length){
      console.log("there is a tween")
      console.log("y of tween = " + tweens[0].vars.css.y)
      endY = tweens[0].vars.css.y;
    } 
  if (e.currentTarget.id=='top') {
   if(endY != 0) {
     TweenMax.to('.circle', 1, {y:0});
   } else {
      console.log("abort new tween to 0")
    }
  } 
  if (e.currentTarget.id=='bottom') {
    if(endY != 300) {
      console.log("create new tween to 300")
      TweenMax.to('.circle', 1, {y:300});
    }  else {
      console.log("abort new tween")
    }
  } 
}

 

http://codepen.io/GreenSock/pen/ZONLYj?editors=0010

 

The above example assumes there is only one tween present on the target but you could loop through the entire array of tweens returned by getTweensOf()

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/getTweensOf/

  • Like 1
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.
×