gsap.from()
method returns either a Tween.from()
or a Timeline.from()
instance depending on if it is chained. For example:
//returns a tween
var tweengsap.from(obj, {duration: 1, x: 100});
//returns a timeline
var timeline = gsap.from(obj, {duration: 1, x: 100})
.from(obj2, {duration: 0.2, rotation: 90});
.from()
methods are static method for creating a Tween instance that tweens backwards - you define the beginning values and the current values are used as the destination values which is great for doing things like animating objects onto the screen because you can set them up initially the way you want them to look at the end of the tween and then animate in from elsewhere.
NOTE: By default, immediateRender
is true
in from()
tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing immediateRender: false
in the vars
parameter so that it will wait to render until the tween actually begins (often the desired behavior when inserting into TimelineLite or TimelineMax instances). To illustrate the default behavior, the following code will immediately set the opacity
of obj
to 0 and then wait 2 seconds before tweening the opacity back to 1 over the course of 1.5 seconds:
gsap.from(obj, {duration: 1.5, opacity: 0, delay: 2});
Since the target
parameter can also be an array of objects, the following code will tween the opacity property of obj1, obj2, and obj3 from a value of 0 simultaneously:
gsap.from([obj1, obj2, obj3], {duration: 1.5, opacity: 0});
Even though 3 objects are animating, there is still only one tween that is created. In order to stagger or offset the start times of each object animating, just use the stagger
property:
gsap.from([obj1, obj2, obj3], {
duration: 1.5,
opacity: 0,
stagger: 0.5 //simple stagger of 0.5 seconds
});
//or get advanced:
gsap.from([obj1, obj2, obj3], {
duration: 1.5,
opacity: 0,
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.from(obj, {duration: 1, opacity: 0, 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.