gsap.fromTo()
method returns either a Tween.fromTo()
or a Timeline.fromTo()
instance depending on if it is chained. For example:
//returns a tween
var tweengsap.fromTo(obj, {x:50}, {duration: 1, x: 100});
//returns a timeline
var timeline = gsap.fromTo(obj, {x: 50}, {duration: 1, x: 100})
.fromTo(obj2, {rotation: 180}, {duration: 0.2, rotation: 90});
Static method for creating a Tween instance that allows you to define both the starting and ending values (as opposed to to()
and from()
tweens which are based on the target’s current values at one end or the other).
NOTE: Only put starting values in the fromVars
parameter - all special properties for the tween (like duration
, onComplete
, delay
, etc.) belong in the toVars
parameter.
By default, immediateRender
is true
in fromTo()
tweens, meaning that they immediately render their starting state regardless of any delay that is specified. This is done for convenience because it is often the preferred behavior when setting things up on the screen to animate into place, but you can override this behavior by passing immediateRender: false
in the fromVars
or toVars
parameter so that it will wait to render the starting values until the tween actually begins (often the desired behavior when inserting into a gsap.timeline
instance).
Since the target
parameter can also be an array of objects, the following code will tween the x
property of obj1
and obj2
from 0
to 100
simultaneously:
gsap.fromTo([obj1, obj2], {x: 0}, {duration: 1, x: 100});
Even though 2 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:
gsap.fromTo([obj1, obj2, obj3], {
x: 0
},
{
duration: 1,
x: 100,
stagger: 0.5 //simple stagger of 0.5 seconds
});
//or get advanced:
gsap.fromTo([obj1, obj2, obj3], {
x: 0
},
{
duration: 1.5,
x: 100,
stagger: {
amount: 2,
from: "center",
grid: "auto",
onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween
}
});
For simple sequencing, you can use the delay
special property (like gsap.fromTo(element, 1, {x: 0}, {x: 100, delay: 0.5})
), but it is highly recommended that you consider using gsap.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.