Jump to content
GreenSock

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

TweenLite.to()

TweenLite.to( target:Object, duration:Number, vars:Object ) : TweenLite

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

Parameters

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 (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll().

duration: Number

Duration in seconds (or frames if useFrames:true is set in the vars parameter)

vars: Object

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

Below is a full list of special properties.

Show More

Returns : TweenLite

TweenLite instance

Details

Static method for creating a TweenLite instance that animates to the specified destination values (from the current values). The following lines of code all produce identical results:

//all produce the same result:
TweenLite.to(element, 1, {x:100});
var myTween = new TweenLite(element, 1, {x:100});
var myTween = TweenLite.to(element, 1, {x:100});

Each line above will tween the "x" property of the element object to a value of 100 over the coarse of 1 second. They each use a slightly different syntax, all of which are valid. If you don't need to store a reference of the tween, just use the static TweenLite.to( ) call.

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

TweenLite.to([mc1, mc2, mc3], 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, please see the staggerTo() method of TimelineLite or TweenMax.

For simple sequencing, you can use the delay special property (like TweenLite.to(element, 1, {x:100, delay:0.5})), but it is highly recommended that you consider using TimelineLite (or TimelineMax) for all but the simplest sequencing tasks. It has an identical to() method that 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.

Example

/*external jshttp://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.jshttp://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js*/window.onload = function(){  var logo = document.getElementById("logo");  TweenLite.to(logo, 1, {left:"632px"});}//run//PC ctnrl-0//MAC cmd-0

See the Pen Basic Tween by GreenSock (@GreenSock) on CodePen.

See the Pen Basic Tween by GreenSock (@GreenSock) on CodePen.

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