{"id":3708,"date":"2017-03-02T18:25:54","date_gmt":"2017-03-03T01:25:54","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2017\/03\/5-steps-for-mastering-web-animation\/"},"modified":"2017-03-02T18:25:54","modified_gmt":"2017-03-03T01:25:54","slug":"5-steps-for-mastering-web-animation","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2017\/03\/5-steps-for-mastering-web-animation\/","title":{"rendered":"5 steps for mastering web animation"},"content":{"rendered":"

Rachel Nabors<\/em><\/a> will be discussing<\/em> the web in motion at <\/em>Generate San Francisco<\/em><\/a> on 9 June, medical<\/a> covering all the things you need to make web animation work for you and your team.<\/em> Book your ticket now<\/em><\/a>!<\/em><\/p>\n

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, this<\/a> demand is on the up<\/a>. And with better in-browser tools on the horizon thanks to the new Web Animation API, ask<\/a> web animation is becoming an essential creative discipline.<\/p>\n

But where do you start? Is CSS better or JavaScript? Which tools won’t break the bank and how do you create interactive prototypes for developers?<\/p>\n

Whether you’re an illustrator looking to take your skills online or a designer hoping to corner a profitable new market, award-winning cartoonist and interaction developer Rachel Nabors<\/a> is on hand to offer valuable advice for getting started in the exciting world of web animation.<\/p>\n

01. Getting started<\/h3>\n

I’m an illustrator. I don’t have a coding background but I’d like to start experimenting with web animation and I’m not sure where to start\u2026 Help! Is CSS or JavaScript better? What are the best resources? Are there any pitfalls I should avoid?<\/strong><\/p>\n

Rachel Nabors: <\/strong>The best place to get started learning web animation is on CodePen<\/a>. This site lets people play with CSS, JavaScript and HTML, share their examples, and make copies or ‘forks’ of each others’ work. It’s a great place to get inspired and poke at code while learning.<\/p>\n

I also cannot stress enough the importance of learning CSS and JavaScript. JavaScript is required for advanced animation with the Web Animation API, Canvas, WebGL and GSAP. I recommend starting with Cody Lindley’s JavaScript Enlightenment<\/a> books.<\/p>\n

02. Web animation tools<\/h3>\n

What are some good tools for digital drawing that won’t break the bank?<\/strong><\/p>\n

RN:<\/strong> I recommend Manga Studio<\/a> and a Bamboo stylus<\/a> 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.<\/p>\n

03. Storytelling<\/h3>\n

How can I incorporate storytelling?<\/strong><\/p>\n

RN:<\/strong> That’s a question with a long answer! I actually run a month-long online course<\/a> on the matter.<\/p>\n

I recommend reading books about storytelling from outside web development. Scour your local library for books on film, writing, cartooning and animation, as well as those 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.<\/p>\n

<\/p>\n

\n

<\/p>

Don’t miss Rachel Nabor’s talk on the web in motion at Generate San Francisco<\/figcaption><\/figure>\n

<\/a><\/p>\n

04. Prototyping<\/h3>\n

Do you prototype your animations in something like After Effects or Framer first?<\/strong><\/p>\n

RN: <\/strong>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 or even Flash!<\/p>\n

I’ve met other teams who send specific motion and timing coordinates to developers as well. And there are others that do a fair amount of interactive prototyping in tools like Framer<\/a> or Edge Animate<\/a>.<\/p>\n

05. Web animation API<\/h3>\n

Will JS animation dominate the future with the arrival of the new Web Animation API?<\/strong><\/p>\n

RN: <\/strong>Meaningful animation will always require some amount of JavaScript; truly interactive animation will require gobs of it. The Web Animation API<\/a> will do two important things:<\/p>\n

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 that’s currently only available to CSS animation. Full support cannot come soon enough!<\/p>\n

Want to learn more about web animation? Come to <\/em>Generate San Francisco<\/em><\/a>, where Rachel Nabors will be speaking about the web in motion, looking at how animation helps people interact with touchscreens, how those same principles apply to the web, where animation has been all this time, and where it’s going. <\/em>Book now<\/em><\/a>!\u00a0<\/em><\/p>\n

This article originally appeared in <\/em>net magazine<\/em><\/a>. issue 264; <\/em>subscribe today.<\/em><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Rachel Nabors will be discussing the web in motion at Generate San Francisco on 9 June, medical covering all the things you need to make web animation work for you and your team. Book your ticket now! It’s never been a more exciting time for web animation. With user interface designers and interaction developers increasingly… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":3709,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-3708","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t