Jump to content
Search Community

_timeScale tweening confusion.

katerlouis test
Moderator Tag

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

I have a constant rotation, repeat: -1

I want to make the rotation faster, so I tween the ._timeScale.

 

Please shed some light on these (atleast to me) unexpected behaviours

1) Tweening _timeScale results in a playback?!

2) What is ._timeScale, anyway?

 

Tweening rotate.timeScale() only works with "generic object+ onUpdate"-approach. 

Tweening _timeScale allows the convenience to tween the tween itself, right

 

 

See the Pen PKGNaP by katerlouis (@katerlouis) on CodePen

Link to comment
Share on other sites

Howdy @kreativzirkel. You should almost never directly access properties/methods that start with "_". Those are for internal use. We don't hide them using closures or something like that because of performance reasons. 

 

If you want to tween timeScale, you should tap into its getter/setter method which is as simple as:

TweenLite.to(otherTween, 1, {timeScale:0.1}); 

 

GSAP can automatically handle any getter/setter methods for any object. 

 

By animating _timeScale, you were bypassing some important internal logic that needs to run whenever you alter the timeScale (like altering its startTime on its parent timeline to ensure the playhead aligns with its current position). Again, you don't need to worry about any of that - just make sure you're tapping into the regular .timeScale() getter/setter.

 

Does that clear things up? 

 

  • Like 1
Link to comment
Share on other sites

Damn, you guys are too fast..

I was just editing / updating my initial post.

 

I found out about that myself by desperate trial and error..

but I don't understand why this magic works.

 

"anyTween.timeScale" in the console returns source code of a function. 

Inspecting a tween in console reveals the same. 

 

So GSAP tweening it's own getter/setter is just some magic exception for GSAPs own functions? 

Or can this be applied to other getter/setter aswell?
I figured GSAP only tweens object properties (not functions). 

  • Like 1
Link to comment
Share on other sites

It'll automatically detect if the value is a function. If it is, it'll treat it as a getter/setter. Example:

yourTween.timeScale(); //returns the tween's timeScale
yourTween.timeScale(0.5); //sets the tween's timeScale to 0.5

 

So the same function is being used as both a getter and setter - if you pass in a value, it's a setter. If not, it returns the current value. It's a common thing in JS libraries. Pretty convenient. 

 

So yeah, you could create your own stuff similarly: 
 

var _customProp = 0; //for internal use 
var obj = {
    customProp: function(value) {
        if (!arguments.length) {
            return _customProp;
        }
        _customProp = value;
    }
};
TweenMax.to(obj, 2, {customProp:100, onUpdate:function() { console.log(obj.customProp()); }});

 

Cool, huh?

  • Like 4
Link to comment
Share on other sites

Interesting that GSAP looks at a at object-properties that are functions to find out if it's a setter / getter;

That opens up a new huge window for me– I suggest promote this behavior a bit more on the main-page etc. (or did I just miss this? Can't remember explicit mentioning in the Docs or anywhere else)

Link to comment
Share on other sites

Properties can be a getter and setter too.

 

var sprite = {
  alpha: 1,
  visible: true,
  get autoAlpha() {
    return this.alpha;
  },
  set autoAlpha(value) {
    this.alpha = value;
    this.visible = (value != 0);
  }
};

sprite.autoAlpha = 0;
console.log(sprite.visible); // => false

sprite.autoAlpha = 0.1;
console.log(sprite.visible); // => true

 

There's a bunch of different ways to create getters and setters. Look at the code for box 5. When GSAP sees a function that starts with "set", it will try to find a matching function that starts with "get".

 

See the Pen 6d42dd35adee8af8ce9c1bcf3f2e6cb2 by osublake (@osublake) on CodePen

 

 

  • Like 3
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.
×
×
  • Create New...