Ever felt like the UIs you create are lifeless and a little boring? Here's one way to spice things up: add character animations. You don't need to be building a game to do this - even regular sites and apps can use some of that extra love and polish that character animation brings!
I love how the yeti fellow gets more and more excited as you type! What a fun experience. A fun login form, who would have thought?
I love this kind of animation - and much prefer it over the overdone "animate in content on scroll" that so many sites use these days.
There are a ton of ways to animate things on the web. Darin's yeti is SVG and GSAP - same as I use in my interceptor ships in Grid Critters. Infinite Red's train is a simple png image with a CSS animation - for fun open your browser's devtools and change the
animation-duration to speed it up or slow it down.
My current favorite animation technique is what's called skeletal animation. It's called this because you create bone structures, attach image assets to the bones, and then animate the underlying bones. You can create really cool, advanced animations this way. Such as critters walking:
Or the pilot Meg and her trusty AI companion controlling a shuttle - notice how Meg works the shuttle's controls as the user is typing code in game:
Or zombies getting slaughtered by an epic crossbow:
I'll take you through my entire process from start to finish so you can create your own awesome animations.
Characters start out as an idea in my head, and I draw from a few sources of inspiration. Meg, AI, and the shuttle were heavily influenced by one of my favorite movies as a kid: Flight of the Navigator.
Once I have an idea of a fun character, I put on my art director hat and sketch out several random ideas using the iPad, the Apple pencil, and the Paper app - further developing the character's attributes/story/world in my mind.
I then work with amazing illustrators to refine and polish the idea over several iterations:
Exploring several variations:
And keeping the best pieces from each of them until at last a perfect final emerges:
Meg went through this same process, starting out pretty rough:
Becoming more and more like you know her now:
She had a bit of a hair crisis:
But turned out pretty great in the end:
Finally we get to put them together - the Captain belongs with her ship:
Now that the artwork is in a good spot, it's time to get it ready for animation. I use a tool called Spine that makes skeletal animations easy. First step is to use the Photoshop script that comes with Spine to export the entire document from Photoshop as individual layers.
Sorry Meg! In this step it looks like her ship was hit with some kind of particle decelerator.
These separate layers are then imported and repositioned in Spine. I draw the "bones" for areas that I want to animate. That includes Meg, AI, the ship's door and landing gear etc. I attach specific layers to specific bones so that when the bones move, so do the layers attached to them.
Now every layer/bone can be animated separately on the timeline, making possible any animation you can imagine!
this.shuttle.state.setAnimation(0, 'success', false) this.shuttle.state.addAnimation(0, 'dropstairs', false, 1)
This is an imperative API so if you're using React like I am or any other framework that likes to control the DOM, you'll need to work around it. In my case I'm dual rendering React components to both the DOM (for positioning) and a WebGL canvas simultaneously. Here's the story of how I landed on that approach if you like stories.
The possibilities are endless! The most important thing is to use character animation to delight your users and have a blast while you're at it.
Try it yourself: breathe new life into your work or side project by adding a simple character animation. I look forward to seeing what you create!
If you want to dig into Spine I recommend following their User Guide.
Master CSS Grids right from the start by playing this new mastery game. You'll learn the ins and outs of Grids one fun level at a time, while saving an adorable alien life form from certain destruction.Master CSS Grid