GSAP’s Big Fat Stagger Gotcha

This was originally posted in my CodePen blog.

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 ='#box', 1, {x:100})

// you can pause it at a particular point in time

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

Or chain a few methods together

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

See the Pen GSAP Stagger Gotcha by Pedro Tavares (@dipscom) on CodePen.

Kota Creative: Penhalingon’s Mystery Mansion

Penhaligon's Mansion Splash Screen

I got to work with Kota for Penhaligon’s again. Another really nice concept with lovely visuals. The idea is for the user to explore Penhaligon’s mansion looking for clues as to who kidnapped Mr. Truthsbury. This time I was brought in earlier on and was responsible for the majority of the code. All in all I fell this was a really nice learning experience as I got to experiment with and add a little bit of Three into my workflow.

Penhaligon’s Mystery Mansion

Bellow, some of the original screen designs.

This slideshow requires JavaScript.

Kota Creative: Penhaligon’s Times

The Penhaligon's Times

Yay! Another project with Kota – those guys are super nice to work with. And we were working with Penhaligon’s again. I really like their visual style – I hope this keeps going and we keep getting repeat work with them. I feel this project was an improvement from the last one in terms of workflow and execution.

I built nearly all the frontend and created all the animation (there’s not a lot there, I admit… But still, mine!)

Penhalingon’s Times