Web Animation using JavaScript: Develop and Design

Web Animation using JavaScript: Develop and Design

by Julian Shapiro
Released March 2015
Publisher(s): Peachpit Press
ISBN: 9780134096681

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

We’ve come a long way since the days of flashing banner ads and scrolling news tickers. Today, the stunning motion design of iOS and Android dramatically improves a user’s experience — instead of detracting from it. The best sites and apps of today leverage animation to improve the feel and intuitiveness of their interfaces. Sites without animation are starting to feel antiquated.


This book provides you with a technical foundation to implement animation in a way that’s both visually stunning and programmatically maintainable. Throughout, we consider the balance between enriching a page with motion design while avoiding unnecessary flourishes


Readers will learn how to design loading sequences that ensure users stay fully engaged instead of tuning out, how to leverage simple physics principles to make apps respond naturally to users’ input (just like motion behaves in the real world), how to exploit CSS transforms to create rich depth in animations, and how to fully leverage JavaScript animation libraries like Velocity.js to streamline animation programming. From animation performance to theory, we cover everything needed to become a professional web animator. Whether you're a novice or professional web developer, this book is for everyone.


Why is all of this so important? Why is it worth your time to become a professional motion designer? For the same reason that designers spend hours perfecting their pages’ font and color combinations, motion designers perfect their animations’ transition and easing combinations: Refined products feel superior. They leave users whispering to themselves, “Wow, this is cool”, right before they turn to a friend and exclaim, “You gotta try this.”

Table of contents

  1. Contents
  2. 1. Advantages of JavaScript Animation
    1. JavaScript vs. CSS animation
    2. Great performance
    3. Features
    4. Maintainable workflows
    5. Wrapping up
  3. 2. Animating with Velocity.js
    1. Types of JavaScript animation libraries
    2. Installing jQuery and Velocity
    3. Using Velocity: Basics
    4. Using Velocity: Options
    5. Using Velocity: Additional features
    6. Using Velocity: Without jQuery (intermediate)
    7. Wrapping up
  4. 3. Motion Design Theory
    1. Motion design improves the user experience
    2. Utility
    3. Elegance
    4. Wrapping up
  5. 4. Animation Workflow
    1. CSS animation workflow
    2. Code technique: Separate styling from logic
    3. Code technique: Organize sequenced animations
    4. Code technique: Package your effects
    5. Design techniques
    6. Wrapping up
  6. 5. Animating Text
    1. The standard approach to text animation
    2. Preparing text elements for animation with Blast.js
    3. Transitioning text into or out of view
    4. Transitioning individual text parts
    5. Transitioning text fancifully
    6. Textual flourishes
    7. Wrapping up
  7. 6. Scalable Vector Graphics Primer
    1. Creating images through code
    2. SVG markup
    3. SVG styling
    4. Browser support for SVG
    5. SVG animation
    6. Implementation example: Animated logos
    7. Wrapping up
  8. 7. Animation Performance
    1. The reality of web performance
    2. Technique: Remove layout thrashing
    3. Technique: Batch DOM additions
    4. Technique: Avoid affecting neighboring elements
    5. Technique: Reduce concurrent load
    6. Technique: Don’t continuously react to scroll and resize events
    7. Technique: Reduce image rendering
    8. Technique: Degrade animations on older browsers
    9. Find your performance threshold early on
    10. Wrapping up

Product information

  • Title: Web Animation using JavaScript: Develop and Design
  • Author(s): Julian Shapiro
  • Release date: March 2015
  • Publisher(s): Peachpit Press
  • ISBN: 9780134096681