Web Animation using JavaScript 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 [email protected] 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 [email protected]. 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. Acknowledgements I would like to thank Yehonatan Daniv for providing support to Velocity’s users on GitHub, Anand Sharma for regularly inspiring me with his motion design work, and David DeSandro for writing this book’s foreword. I’d also like to thank Mat Vogels, Harrison Shoff, Adam Singer, David Caplan, and Murat Ayfer for reviewing drafts of this book. Contents Foreword Introduction CHAPTER 1 ADVANTAGES OF JAVASCRIPT ANIMATION JavaScript vs. CSS animation Great performance Features Page scrolling Animation reversal Physics-based motion Maintainable workflows Wrapping up CHAPTER 2 ANIMATING WITH VELOCITY.JS Types of JavaScript animation libraries Installing jQuery and Velocity Using Velocity: Basics Velocity and jQuery Arguments Properties Values Chaining Using Velocity: Options Duration Easing Begin and Complete Loop Delay Display and Visibility Using Velocity: Additional features Reverse Command Scrolling Colors Transforms Using Velocity: Without jQuery (intermediate) Wrapping up CHAPTER 3 MOTION DESIGN THEORY Motion design improves the user experience Utility Borrow conventions Preview outcomes Distraction over boredom Leverage primal instincts Make interactions visceral Reflect gravitas Reduce concurrency Reduce variety Mirror animations Limit durations Limit animations Elegance Don’t be frivolous Your one opportunity to be frivolous Consider personality Go beyond opacity Break animations into steps Stagger animations Flow from the triggering element Use graphics Wrapping up CHAPTER 4 ANIMATION WORKFLOW CSS animation workflow Issues with CSS When CSS makes sense Code technique: Separate styling from logic Standard approach Optimized approach Code technique: Organize sequenced animations Standard approach Optimized approach Code technique: Package your effects Standard approach Optimized approach Design techniques Timing multipliers Use Velocity Motion Designer Wrapping up CHAPTER 5 ANIMATING TEXT The standard approach to text animation Preparing text elements for animation with Blast.js How Blast.js works Installation Option: Delimiter Option: customClass Option: generateValueClass Option: Tag Command: Reverse Transitioning text into or out of view Replacing existing text Staggering Transitioning text out of view Transitioning individual text parts Transitioning text fancifully Textual flourishes Wrapping up CHAPTER 6 SCALABLE VECTOR GRAPHICS PRIMER Creating images through code SVG markup SVG styling Support for SVG SVG animation Passing in properties Presentational attributes Positional attributes vs. transforms Implementation example: Animated logos Wrapping up CHAPTER 7 ANIMATION PERFORMANCE The reality of web performance Technique: Remove layout thrashing Problem Solution jQuery Element Objects Force-feeding Technique: Batch DOM additions Problem Solution Technique: Avoid affecting neighboring elements Problem Solution Technique: Reduce concurrent load Problem Solution Technique: Don’t continuously react to scroll and resize events Problem Solution Technique: Reduce image rendering Problem Solution