_timeScale tweening confusion.

[kreativzirkel 43 Likes (Newbie)]

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

[GreenSock 8,117 Likes (Superhero)]

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? 

 

[kreativzirkel 43 Likes (Newbie)]

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). 

[GreenSock 8,117 Likes (Superhero)]

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?

[kreativzirkel 43 Likes (Newbie)]

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)

[OSUblake 9,990 Likes (Superhero)]

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