.vars

The vars object passed into the constructor which stores configuration variables like onComplete, onUpdate, etc.

CHANGE FORMAT methods

• callbackScope : Object - The scope to be used for all of the callbacks (onStart, onUpdate, onComplete, etc.). The scope is what this refers to inside any of the callbacks.

• delay : Number - Amount of delay in seconds before the animation should begin.

• duration : Number - Length of the animation in seconds before the animation should begin.

• ease : [Ease | Function | String] - You can choose from various eases to control the rate of change during the animation, giving it a specific “feel”. For example, "Elastic.easeOut" or "Strong.easeInOut". For best performance, use one of the GreenSock eases (Linear, Power0, Power1, Power2, Power3, Power4, Quad, Cubic, Quart, Quint, and Strong, each with their .easeIn, .easeOut, and .easeInOut variants are included, and you can load EasePack to get extras like Elastic, Back, Bounce, SlowMo, SteppedEase, Rough, Circ, Expo, and Sine). For linear animation, use "linear". You can also define an ease by the ease object like Strong.easeOut or reverse style (like jQuery uses) "easeOutStrong". The default is "Quad.easeOut".

• immediateRender : Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, set immediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true.

• lazy : Boolean - When a tween renders for the very first time and reads its starting values, GSAP will automatically “lazy render” that particular tick by default, meaning it will try to delay the rendering (writing of values) until the very end of the “tick” cycle which can improve performance because it avoids the read/write/read/write layout thrashing that some browsers do. If you would like to disable lazy rendering for a particular tween, you can set lazy: false. Or, since zero-duration tweens do not lazy-render by default, you can specifically give it permission to lazy-render by setting lazy: true like gsap.set(element, {opacity: 0, lazy: true});. In most cases, you won’t need to set lazy. To learn more, watch the video here.

• onComplete : Function - A function that should be called when the animation has completed.

• onCompleteParams : Array - An Array of parameters to pass the onComplete function. For example, gsap.to(element, {duration: 1, left: "100px", onComplete: myFunction, onCompleteParams: [element, "param2"]});.

• onStart : Function - A function that should be called when the animation begins (when its time changes from 0 to some other value which can happen more than once if the tween is restarted multiple times).

• onStartParams : Array - An Array of parameters to pass the onStart function. For example, gsap.to(element, {duration: 1, x: 100, onStart: myFunction, onStartParams: [element, "param2"]});.

• onOverwrite : Function - A function that should be called when the tween gets overwritten by another tween. The following parameters will be passed to that function:

  1. overwrittenTween : Animation - The tween that was just overwritten.

  2. overwritingTween : Animation - The tween did the overwriting.

  3. target : Object [only passed if the overwrite mode was "auto" because that’s the only case when portions of a tween can be overwritten rather than the entire thing] - The target object whose properties were overwritten. This is usually the same as overwrittenTween.target unless that’s an array and the overwriting targeted a sub-element of that array. For example, gsap.to([obj1, obj2], {duration: 1, x: 100}) and then gsap.to(obj2, {duration: 1, x: 50}), the target would be obj2.

  4. overwrittenProperties : Array [only passed if the overwrite mode was "auto" because that’s the only case when portions of a tween can be overwritten rather than the entire thing] - An array of property names that were overwritten, like ["x","y","opacity"].

Note: there is also a static gsap.onOverwrite that you can use if you want a quick and easy way to be notified when any tween is overwritten (great for debugging). This saves you the hassle of defining an onOverwrite on a tween-by-tween basis.

• onRepeat : Function - A function that should be called each time the animation repeats.

• onRepeatParams : Array - An Array of parameters to pass the onRepeat function. For example, gsap.to(element, {duration: 1, x: 100, onRepeat: myFunction, onRepeatParams: [element, "param2"]});

• onReverseComplete : Function - A function that should be called when the animation has reached its beginning again from the reverse direction. For example, if reverse() is called the tween will move back towards its beginning and when its time reaches 0, onReverseComplete will be called. This can also happen if the animation is placed in a timeline instance that gets reversed and plays the animation backwards to (or past) the beginning.

• onReverseCompleteParams : Array - An Array of parameters to pass the onReverseComplete function. For example, gsap.to(element, {duration: 1, x: 100, onReverseComplete: myFunction, onReverseCompleteParams: [element, "param2"]});.

• onUpdate : Function - A function that should be called every time the animation updates (on every frame while the animation is active).

• onUpdateParams : Array - An Array of parameters to pass the onUpdate function. For example, gsap.to(element, {duration: 1, x: 100, onUpdate: myFunction, onUpdateParams: [element, "param2"]});.

• overwrite : [Boolearn | String] - Controls how (and if) other tweens of the same target are overwritten. The default is false (although you can change the default mode using gsap.defaults({overwrite:"auto"});. All the values you can use are as follows:

  • false (0) (or "none") - No overwriting will occur.

  • true (1) (or "all") - Immediately overwrites all tweens of the same target(s) regardless of whether or not there are duplicate/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.

• paused : Boolean - If true, the animation will pause itself immediately upon creation.

• repeat : Number - Number of times that the animation should repeat after its first iteration. For example, if repeat is 1, the animation will play a total of twice (the initial play plus 1 repeat). To repeat indefinitely, use -1. repeat should always be an integer.

• repeatRefresh : Boolean - Setting repeatRefresh: true will cause a repeating tween to invalidate() and re-record its starting/ending values internally on each repeat iteration. NOTE: duration and delay do NOT get refreshed on each repeat because that could lead to logical inconsistencies. Using repeatRefresh only really makes sense to do when you have dynamic values (relative, random, or function-based). For example, gsap.to(".class", { duration: 1, repeat: 5, repeatRefresh: true, x: "random(-100,100)", y: "+=50" });.

• repeatDelay : Number - Number - Amount of time in seconds between repeats. For example, if repeat is 2 and repeatDelay is 1, the animation will play initially, then wait for 1 second before it repeats, then play again, then wait 1 second again before doing its final repeat.

• startAt : Object - Allows you to define the starting values for tweening properties. Typically, GSAP uses the current value (whatever it happens to be at the time the tween begins) as the starting value, but startAt allows you to override that behavior. Simply pass an object in with whatever properties you’d like to set just before the tween begins. For example, if element.x is currently 100, and you’d like to tween it from 0 to 500, do gsap.to(element, {duration: 2, x: 500, startAt: {x: 0}});.

• yoyo : Boolean - If true, every other repeat cycle will run in the opposite direction so that the tween appears to go back and forth (forward then backward). This has no affect on the reversed property though. So if repeat is 2 and yoyo is false, it will look like: start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end. But if yoyo is true, it will look like: start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end.

• yoyoEase : [Ease | Boolean] - You can set yoyoEase to a specific ease like "Power2.easeOut" or to simply flip the existing ease, use the shortcut yoyoEase: true. GSAP is smart enough to automatically set yoyo: true if you define any yoyoEase, so there’s less code for you to write. Video and demos.