It's never been a more exciting time for web animation. With user interface designers and interaction developers increasingly relying on animation to improve their online experiences, demand is on the up. And with better in-browser tools on the horizon thanks to the new Web Animation API, 2015 is set to be the year web animation explodes as a creative discipline.
Whether you're an illustrator looking to take your skills online or a designer hoping to master a profitable new market, award-winning cartoonist and interaction developer Rachel Nabors shares valuable advice for getting started in the exciting world of web animation.
And if you're all fired up to learn a new skill, check out Computer Arts 235: Make 2015 Your Best Year Ever – a bumper issue packed with everything you need.
01. Getting started
02. Web animation tools
What are some good tools that won't break the bank for digital drawing?
RN: I recommend Manga Studio and a Bamboo stylus to anyone wanting to break into drawing digitally. I'm sure there are other products and combinations out there, but these two together are affordable and deliver beautiful lines.
How can I incorporate storytelling in web?
RN: As for incorporating storytelling on the web, that's a question with a much longer answer. For instance, I run an month-long online course on the matter at rachelnabors.com/training.
I recommend reading books about storytelling from outside web development. Scour your local library for books on film, writing, cartooning, animation, books that have "story" in their titles and descriptions. Take one of these up as a side hobby, and soon you'll find it forms a feedback loop with your more technical work.
Do you prototype your animations in something like After Effects or Framer first?
RN: The web animators and UI designers I know send their materials to development teams with little movies of how they should look in action. They often use the tools they are most comfortable with designing motion in: After Effects and even Flash!
05. Web animation API
Will JS animation dominate the future with the arrival of new Web Animation API?
It'll open up the browser's rendering engine for browsers and extension developers to build better in-browser tools for manipulating animations, and give animation library developers access to hardware acceleration currently only available to CSS animation. Full support cannot come soon enough!
Words and image: Rachel Nabors
Rachel Nabors is an interaction developer and award-winning cartoonist. When not biking around Portland, she makes interactive stories with code at her company TinMagpie.com. You can find more of Rachel's pro web animation tips and tricks inside net magazine issue 264 - on sale now!
Liked this? Try these...