Jump to content



.to( target:Object, vars:Object ) : *

[static] Static method for creating a Tween instance that animates to the specified destination values (from the current values).


target: Object

Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle, falling back to document.querySelectorAll().

vars: Object

An object defining the end value for each property that should be tweened as well as any special properties likeonCompleteease, etc. For example, to tween obj.x to 100 and obj.y to 200 and then call myFunction, do this:gsap.to(obj, {duration: 1, x: 100, y: 200, onComplete: myFunction});

Returns : *

self (makes chaining easier)


gsap.to() is a shortcut for creating a new Tween() (although you would never explicitly create a tween by using Tween() since it is an internal class) and calling its to() method.

Static method for creating a Tween instance that animates to the specified destination values (from the current values). This static method can be more intuitive for some developers and shields them from potential garbage collection issues that could arise when assigning a tween instance to a persistent variable. The following lines of code produce identical results:

  1. gsap.to(obj, {duration: 1, x: 100});
  2. var myTween = gsap.to(obj, {duration: 1, x: 100});

Both lines above will tween the x property of the object to a value of 100 over the course of 1 second. They each use a slightly different syntax, both of which are valid. If you don’t need to store a reference of the tween, just use the static gsap.to() call.

Note that there is no such thing as Tween.to() or gsap.tween().  There is only gsap.to() (and other similar methods like gsap.from() and gsap.fromTo() which returns a Tween.to() or a Timeline.to() depending on the chaining).

Since the target parameter can also be an array of objects, the following code will tween the x property of obj1, obj2, and obj3 to a value of 100 simultaneously:

  1. gsap.to([obj1, obj2, obj3], {duration: 1, x: 100});

Even though 3 objects are animating, there is still only one tween created. In order to stagger or offset the start times of each object animating, just use the stagger property:

  1. gsap.to([obj1, obj2, obj3], {
  2. duration: 1,
  3. x: 100,
  4. stagger: 0.5 //simple stagger of 0.5 seconds
  5. });
  6. //or get advanced:
  7. gsap.to([obj1, obj2, obj3], {
  8. duration: 1,
  9. x: 100,
  10. stagger: {
  11. amount: 2,
  12. from: "center",
  13. grid: "auto",
  14. onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween
  15. }
  16. });

An array of keyframes can also be used. For example,

  1. gsap.to(".class", [
  2. {x: 100, duration: 1},
  3. {y: 200, duration: 1, delay: 0.5}, //create a 0.5 second gap
  4. {rotation: 360, duration: 2, delay: -0.25} //overlap by 0.25 seconds
  5. ]);

For simple sequencing, you can use the delay special property (like gsap.to(obj, {duration: 1, x: 100, delay: 0.5})), but it is highly recommended that you consider using a timeline for all but the simplest sequencing tasks. It allows you to append tweens one-after-the-other and then control the entire sequence as a whole. You can even have the tweens overlap as much as you want.

Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.