Julian Shapiro - Web Animation using JavaScript: Develop & Design

DEVELOP AND DESIGN

Julian Shapiro

WWW.PEACHPIT.COM

Web Animation using JavaScript: Develop and Design
Julian Shapiro

Peachpit Press
www.peachpit.com

To report errors, please send a note to
Peachpit Press is a division of Pearson Education.

Copyright 2015 by Julian Shapiro

Editor: Victor Gavenda
Development editor: Margaret S. Anderson
Project manager: Margaret S. Anderson
Technical editor: Jay Blanchard
Copyeditor: Gretchen Dykstra
Production editor: David Van Ness
Proofreader: Patricia Pane
Compositor: Danielle Foster
Indexer: Jack Lewis
Cover design: Aren Straiger
Interior design: Mimi Heft

Notice of Rights

All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact .

Notice of Liability

The information in this book is distributed on an As Is basis, without warranty. While every precaution has been taken in the preparation of the book, neither the author nor Peachpit shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it.

Trademarks

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identified throughout this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book.

ISBN-13: 978-0-134-09666-7
ISBN-10: 0-134-09666-5

9 8 7 6 5 4 3 2 1

Printed and bound in the United States of America

I dedicate this book to people who play Counter-Strike.
And to people who like the show Rick and Morty.

I would like to thank Yehonatan Daniv for providing support to Velocitys users on GitHub, Anand Sharma for regularly inspiring me with his motion design work, and David DeSandro for writing this books foreword. Id also like to thank Mat Vogels, Harrison Shoff, Adam Singer, David Caplan, and Murat Ayfer for reviewing drafts of this book.

Its a special time when a developer first discovers jQuerys .animate(). I remember trying to animate any part of the page that wasnt bolted to the main content. I created accordions, fly-out menus, hover effects, scroll transitions, magical reveals, and parallax sliders. Turning my websites from cold, static documents into moving, visual experiences felt like I was reaching another level as a web designer. But it was just bells and whistles. I realize now that for all the animation I added, I hadnt actually improved the user experience of my websites.

All the same, it was thrilling. So what makes animation so exciting?

My apartment looks over downtown Brooklyn. I see people walk down the street. Plumes from smokestacks billow up. Pigeons flutter to perch on a ledge. A construction crane raises a section of a building. A single, heart-shaped balloon floats up into the Brooklyn sky (corny, I know, but I literally saw this happen twice). Cars drive over the Williamsburg Bridge. Clouds pass overhead.

The world is in motion.

This is how you expect the universe to work. Things move. Like the movements outside my window, each one is a one-sentence story. Together they tell the larger story of what is happening.

Yet this isnt how digital interfaces work. Those little stories are missing. When things change, you have to fill in the story for yourself. When you press the Next button at an ATM, the screen suddenly changes. Did it move forward successfully? Was there an error? You have to read the screen again to interpret the results of your action. Utilizing motion removes this leap of understanding between interactions. Motion inherently communicates what has changed. Its like writing tiny stories between states.

When a slide transition takes you to the next screen, animation helps you better understand what just happened. Wielding this power is what makes animation so thrilling. Like layout, color, and typography, animation helps you shape and direct the user experience. Animation is more than just making things move. Its designing more effectively, and doing it thoughtfully.

Unfortunately, in the history of web animation, thoughtfulness hasnt always been the highest priority. As developers, weve used Flash, animated GIFs, Java applets, marquee tags, and, more recently, CSS, JavaScript, and SVG to create animation thats been, at best, a level of polish or, at worst, a gimmick. The idea of creating animation thats both high-performance and user-friendly is relatively new.

So its a good thing you have this book in front of you. Julian Shapiro is one of the principal experts on animation on the web. In creating and supporting Velocity.js, he has developed an intimate knowledge of all the quirks and advantages of using motion on websites. Web Animation using JavaScript will give you not only the technical know-how required to implement animation in your websites, but, more importantly, the insights youll need to use animation effectively and craft compelling user experiences.

Animation libraries and technologies have made motion design more accessible than ever. But not every developer abides by best practices. The past couple of years have seen several trendy anti-patterns come and go. Scroll behavior has been hijacked. Mobile navigation has been pushed into menus accessible only via gestures. While adding animation is within the grasp of anyone who stumbles across .animate(), utilizing it to improve the user experience is one of the hallmarks of a dedicated developer. This book will help you become one of them.

David DeSandro
February 2015
Brooklyn, New York

David DeSandro is the founder of Metafizzy
and author/developer of Masonry and Isotope.

In the early days of the web, animation was primarily used by novice developers as a last-ditch effort to call attention to important parts of a page. And even if they wanted animation to transcend its niche, it couldnt: browsers (and computers) were simply too slow to deliver smooth web-based animation.

Weve come a long way since the days of flashing banner ads, scrolling news tickers, and Flash intro videos. Today, the stunning motion design of iOS and Android dramatically improves the user experienceinstead of detracting from it. Developers of the best sites and apps leverage animation to improve the feel and intuitiveness of their user interfaces. Animations rise to relevancy isnt just a by-product of improved processing power; it reflects a better appreciation for best practices within the web development community. The tools you use to make a website are now considered less important than the quality of the resulting user experience. As obvious as this seems, it wasnt always the case.

So, what makes animation in particular so useful? Whether its transitioning between chunks of content, designing intricate loading sequences, or alerting the user what to do next, animation complements text and layout to reinforce your sites intended behavior, personality, and visual sophistication. Does your content bounce into view in a friendly way, or does it whip across the screen? This is the domain of motion design, and the decisions you make will establish the transcendent feeling of your app.