Web Animation using JavaScript

2015·5.38 MB·English

by  Julian Shapiro

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