Catworking III

It really is annoying to have management breathing down your neck as one works.

Catworking III
That’s some micro-management.


Today I came across the etymology (origin) of the term ‘freelancer’. I’m cooler than I knew I was.

From Wikipedia (December 5, 2017):

Although it is commonly attributed to Sir Walter Scott (1771–1832) in Ivanhoe (1820) to describe a “medieval mercenary warrior” or “free-lance” (indicating that the lance is not sworn to any lord’s services, not that the lance is available free of charge),[34] a previous appearance occurs in Thomas N. Brown in The Life and Times of Hugh Miller (1809).,[35] p 185. It changed to a figurative noun around the 1860s and was recognized as a verb in 1903 by authorities in etymology such as the Oxford English Dictionary. Only in modern times has the term morphed from a noun (a freelance) into an adjective (a freelance journalist), a verb (a journalist who freelances) and an adverb (she worked freelance), as well as into the noun “freelancer”.



Nearly eleven months since the day we moved in, unpacking starts.

Photo of cardboard boxes from the move in the dining room
Unpacking in the dining room

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.

The Tale of Taking Down a Tree – Round 2

After taking down all the branches from the apple tree the day before, I needed to cut them into smaller pieces if I was to have any hope of taking them down to the recycling center.

Branches to get rid of
Branches to get rid of

Obviously, the OCD kicks in and I must sort those branches and twigs by relative thickness, separate the apples and collect the loose leaves into a box.

It took about two thirds of the day, of course. All done by hand. Will I ever learn?

End of round two