The .staggerFrom()/From()/To() methods are great!

Except when you only want a single tween. Then it can be a headache if you don't remember that it returns an ARRAY.

Because it returns an array, all the other chainable methods will fail if you assign it to a variable.

Allow me to elaborate:

When you want to control a tween using GSAP, you will assign it to a variable and that's that. You now have full control of it.

  let tween = TweenMax.to('#box', 1, {x:100})

// you can pause it at a particular point in time
tween.pause(0.5)

// Or check if it is playing
tween.isActive() // returns false

Or chain a few methods together
tween.progress(0.75).reverse()

// Amongst many other things

However, do that with any of the stagger methods and you shall receive a lovely Uncaught TypeError: in the console telling you whatever method you have just called is not a function.

  let tween = TweenMax.staggerTo('.boxes', 1, {x:100})

tween.pause() // throws an error saying tween.pause is not a function

As you now know, in the above example, tween is actually an array. If you were to console.log(tween.length) instead of trying to pause the tween, you would see in your console the number of items in that array. No errors.

Regardless of how many elements you are trying to tween, it will always return an array and you will have to remember that. When the time comes and you need a single tween to control an animation, the easiest thing to do is to wrap that single tween into a timeline and control the timeline. Sure, you can access each individual tween inside the array returned by the stagger method but, creating a timeline to encapsulate it is super cheap and will be a lot easier than writing loops to go over the elements in the array.

  let tween = new TimelineLite()

tween.staggerTo('.boxes', 1, {x:100})

tween.pause() // no errors! :D

Bellow is from real-world example - I've boiled the code down to just the bare bones for simplicity sake and sprinkled a bit of CSS to make it look pretty. I needed the fingers of the gripper to rotate at opposite directions at the same time whenever the user clicked the gripper. A job for a staggerTo() method and the cycle property.


764 0 6