A few years back (2014) a link was sent around the design and development community that made everyone stop and question all their previous work: aprilzero.com. Besides the incredible amount of information and hyper-precise details, AprilZero was peppered with subtle animations that made the website feel alive and gave it a human like pulse. Anand Sharma leveled up the entire internet with the true potential of pure HTML and CSS animations.
Taking something mundane — for AprilZero it was copious amounts of raw data — and subsidizing it with animations and design is a strategy that works for all kinds of scenarios: describing deeply technical infrastructure, walking someone through a sign up flow, or showing API documentation and usage.
Of course not all animation is useful. Knowing when and how to use animation is part art form and part knowing best practices, but when used well animation can make communication a whole lot more descriptive.
If you’ve never done animation before don’t worry, it’s actually pretty straightforward. We’ll show you how with a simple 5 step process.
5 things to level up your web animation game
1) Understand what you are trying to say
Narratives and stories are the most engaging ways to communicate with others. I like to think of animation as extending that line of thinking by adding personality to interfaces and digital objects.
The first step is to define what exactly you’re trying to communicate. If you’re marketing your product, describe how the hero (your product) saves the victim (your customer) from the villain (their problem).
I would strongly advocate spending at least half of your allocated time going through this process. If you don’t know what you’re trying to communicate, all the animations in the world aren’t going to save you. Figure this out.
2) Get inspired
Okay so you got through the tedious but incredibly useful phase of defining your narrative, now it’s time for the fun stuff.
At this point maybe you have a vague idea of what the animation is, but I’d let that go for a moment and just allow yourself to be inspired. Spend some time absorbing work that you find mesmerizing and special. Jot down or sketch why you like that animation and start bookmarking links for later.
When I was recently working on a product based animation, these were a few of my reference projects. Note that they vary quite a bit in their implementation but are all fundamentally describing a product.
Stripe Connect and really anything on stripe.com
district0x
Mac Pro
And more on the less “useful” side of things I like to reference FUI (fantasy user inteface) animation reels.
Age of Ultron
Oblivion GMUNK
Tron GMUNK
3) Mock it up
After filling your mind with wonder and whimsy, it’s time to come back to reality and figure out what you can actually create and ship. I go back and forth between sketching, storyboarding and a text document allowing each unique medium to influence and refine each other.
Sketching
This is for me the creative aspect. At home, I have a large desk next to a window and I like to put on some music and sketch very loosely with a thick pen, generating a volume of ideas. Also drastic changes in environment help me come up with new concepts so I carry a small sketchbook with me everywhere and allow my surroundings to inspire the details of a project.
Text Doc
As a very pragmatic and descriptive tool, I use a text document to verbosely define each step of the process (e.g. this box will fade in from left to right). I will typically start at a high level and start infilling as I continue to sketch.
Storyboarding
This sits somewhere in between sketching and writing, and when I’m in a crunch this can be the only tool I use. At a minimum it will define each “scene” of the animation while also letting me annotate how that scene enters and exits.
4) Choose the technology
The early examples I showed in step 2 are made with very different types of technology. Depending on your project’s timeline and resources you can leverage each technique as you see fit. These are ordered loosely based on difficulty and time.
Gif
Although they are seemingly being replaced by css animations, gifs are still great because they’re sharable and have a nicely compartmentalized workflow.
Photoshop Gif— if you just want to do simple opacity and text overlays, it’s fairly easy in PS. Open up the timeline window, add each layer to a keyframe, and interpolate between the frames. Save for web.
Keynote and After Effects give you progressively more features to create animations that you can then export with motion blur to produce a gif.
Javascript
Stripe’s website is hand coded by @bdc purely in HTML and CSS with a bit of Javascript to push things along. Luckily for us, during the Bitcoin landing page project he extracted out his animation code and open sourced the library with really great default settings.
Video
Finally, the Mac Pro animation is actually a fairly complicated stack of 3D rendered videos which are controlled by Javascript and a bit of HTML for annotation. Reaching the level of performance art, animations which sync complex rendered videos and html elements are probably better left up to teams of specialists, but there’s definitely things to be gleaned from these high production pieces.
5) Prototype for days
As more of an addendum rather than an actual step in the process, I’d be remiss if I didn’t suggest prototyping techniques.
When your animation extends beyond simple opacity and transforms, prototyping plays an important role in letting you explore the potential possibilities. I personally find it faster to break apart the animation and use prototyping as a way to test smaller snippets, but I’ve seen others use it exclusively to produce the entire animation.
Keynote
Just because it’s used to make “Power Point” presentations doesn’t mean this isn’t an amazing animation tool. In fact, its limited tool set is perfect for letting someone new understand that complicated features aren’t what make animation powerful. One of the best pure Keynote animations I’ve seen is created by Linda Dong.
Prototyping Tools
The proliferation of tools for creating animations was overwhelming back in 2016, but designers seem to be coalescing around a few favorites.
Principle appears to be the go to for web animation while Flinto maintains its position for mobile with clickable interactivity. An up and comer which I’ve been using lately is Spirit JS, which has a modernized Macromedia Flash-like interface for all those who thought their skills would be left to ossify and rot.
If you have a little coding chops Framer is perfect since it has integrated spring dynamics while also giving you plenty of freedom to animate in any way you can imagine. It also helps that they’re starting to become a design tool which simplifies the workflow.
Directly in code
Perhaps because I’m a masochist or as I like to say “detail-oriented,” I prefer working directly in code. Jumping on Codepen and forking other’s animations or even my own, is a really fast iteration technique. Plus, since I’m writing code that is running in a browser, I gain all the interactions like hover, click, etc. and I know it will run in production!
Whichever tool you use, make sure it lets you explore and quickly test ideas. Part of what’s great about web animation is creating something new and that happens when your tool helps you translate your concepts into working ideas easily.
This is great info and all but how do I actually get started
The two ways I recommend: take your personal site and animate a very small part of it or find a freelance client (or your company) and take a piece of their site and give it a bit of motion.
I’ve had clients who hired me to do static mockups, and I threw a small part of their design into a Codepen and sent it along. Clients love it. I’ve been able to upsell my services at better rates based on something I would have done for fun anyway.
I hope this was helpful and if you still have questions on getting started feel free to reach out to me @moeamaya or message me if you’re hiring a contract product designer in San Francisco.
A few of our projects
Robotist is a site that curates and reviews top API vendors. Starting with Embedded Payroll, we dive deep into technical research about payroll, tax compliance, API endpoints, and services that each vendor has to offer.
Explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites, or as desktop and phone wallpapers.
