Here's a really good reason to dump your thoughts in the pen description:

People can read it – and give you feedback

👉 Simply put: Giving and receiving. You know... community stuff!


This pen actually contains some really smart stuff.

I mean, I'm not expecting a call from NASA anytime soon, but in my sparkly little world of shapes and colors that's definitely how I feel.

If I had seen it a few weeks ago, I wouldn't have believed that I had written it. The reason why I could write it however, is simply because it was given to me.

.


What follows is an example of how I allowed this community to help me grow by openly sharing my thoughts and why you should too.


. .

✨ Wizard lvl 1 ✨

Cloak with mold and moth holes

.

A few weeks ago, I posted this Starwars pen. In the pen description I shared my thoughts on creating a 3D looking droid's head in a – to me – pretty straight forward way.

I was inspired by a concept from After Effects, called null objects, which basically means that you can set values to a smart little non-visible object and use those values to any other element.

At the time, this method made a lot of sense to me, but because I bothered to jot down my inferior thoughts I got some really really interesting feedback helping me to level up.

. .

✨ Wizard lvl 2 ✨

Less moldy cloak and a staff of papier-mâché

.

First @Shshaw reached out and asked:

For the nullObject bit, is there a reason you didn’t control all those elements as a TimelineLite which you tween the progress of instead of a null object?

My answer was something like:

Uhm, yeah.. no

.

His point was that I could rig the parallaxing elements in a far more straight forward way by putting them all on a timeline and then tween the progress value of that timeline.

Tweening a tween – mind blown!

.

  // In its simplest form, make a timeline where all tweens have the same duration, start at the same time, but have individual min and max values. Et voila, parallaxing elements!
tl
    .fromTo(body, 1, { x: body.min }, { x: body.max }, 0)
    .fromTo(head, 1, { x: head.min }, { x: head.max }, 0);

// Tween progress value of tl
TweenMax.to(tl, 5, { progress: 1 });

.

(If you're not familiar with the terms here, check out GSAP now!)

. .

✨ Wizard lvl 3 ✨

Still moldy cloak but a staff of actual wood

.

Next Sensei @OSUBlake reach out:

About nullObjects, check out the mouse object in this demo. I'm using it as a chase value to smoothly pan over an image. Tweening the mouse object would have the same effect. Doesn't have to be tied any events.

.

He was referring to a truly awesome method that have changed my way of thinking about animation. This example is about capturing mouse movement, but it's not at all limited to that.

  // Create an object to store mouse position
var mouse = { x: 0 };

// Update mouse object on mouse move
window.addEventListener("mousemove", updateMouseObject);

// Use the mouse object to update the position of an element once per frame
TweenMax.to(element, duration, { x: 0,
    modifiers: {
        x: function() {
            // the map function returns a value between el.min and el.max correlating to where the mouse is on the range between mouse.min and mouse.max
            destination = map(mouse.x, mouse.min, mouse.max, el.min, el.max);
            return currentPosition + (destination - currentPosition) * acceleration;
        }
    }
});

// Note that this snippet is incomplete, simplified to make a point
// Check out Blake's pen to dig deeper (link above)

.

Essentially, one event listener, calling one function, updating one object, used in one tween object. Everything is One.

Blake's code is like a Zen garden. My code was like a middle-school disco – too many sweating tweens on a sugar-high.

Multiple listeners, stored values and declared variables all over the place and a crazy amount of tween objects created each second. It made sense to me at the time, and I'm super happy that I did it, but... you know... enlightenment is ace.

. .

✨ Wizard lvl 4 ✨

Wielding my staff

To be honest, the reason why I created this pen was because someone close asked me:

Hey, can you draw Kaonashi from Spirited Away?

And I was like:

Uhm... I think so

Once I had started tho, it came clear to me that it made perfect sense to apply the great feedback I had recieved just some week ago. The result is a combination of the two; tweeing tweens by chasing the mouse.

This bit is pretty much where it all comes together:

  TweenMax.to(tl, infiniteDuration, {
    progress: 1, // This is the attribute we're tweening
    modifiers: { // GSAP modifiersPlugin call allows dynamic values
        progress: function() { // This function returns a new value once per tick
            var currentValue = tl.progress();
            var storedValue = progress.value = map(mouse.x, mouse.min, mouse.max, progress.min, progress.max);
            var newValue = currentValue + (storedValue - currentValue) * acceleration;
            return newValue;
        }
    }
});

It felt good to write that piece.

.

A year ago I had barely ever written a line of javascript and now I think I just wrote the first piece of code that I'm actually proud of. That's a big deal to me and – if it wasn't clear – it's all thanks to people sharing and you enabling them to share.

. .

⌨️ Use it

The last shout out goes to @steveg3003 who inspired me to write this post. He wrote me after reading this pen description.

whoa, [...] the detail you went to in the description is amazing! Really great. I'm going to try spend some more time on my descriptions from now on!

The idea of reading this guy's own thoughts on his great pens really excited me. And I'm excited to read yours too.

I'm always praying for a juicy description attached to the interesting pens I come across. Sadly, it's super rare. And even if a pen is not that interesting, a description would enable me to maybe help out.

I figured that if I share my thoughts on why pen descriptions are amazing enablers, maybe I can nudge this culture in the right direction.


So be inspired like Steve! Open up your little heads and let people take have a look inside. It's great fun, super valuable and we build a stronger community. 👈 Pretty good things!

And don't worry about being percieved as stupid, lame or crazy – we already know you are. All wizards are! ❤️

. .

Follow these guys and grow:


1,320 6 29