Cover image for Web Animation using JavaScript: Develop and Design

Web Animation using JavaScript: Develop and Design

Author Julian Shapiro
Release Date: 2015/03/01
ISBN: 9780134096681
Topic:
0%
24
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

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. Title Page
  2. Copyright Page
  3. Dedication Page
  4. Acknowledgements
  5. Contents
  6. Foreword
  7. Introduction
  8. Chapter 1. Advantages of JavaScript Animation
    1. JavaScript vs. CSS animation
    2. Great performance
    3. Features
      1. Page scrolling
      2. Animation reversal
      3. Physics-based motion
    4. Maintainable workflows
    5. Wrapping up
  9. Chapter 2. Animating with Velocity.js
    1. Types of JavaScript animation libraries
    2. Installing jQuery and Velocity
    3. Using Velocity: Basics
      1. Velocity and jQuery
      2. Arguments
      3. Properties
      4. Values
      5. Chaining
    4. Using Velocity: Options
      1. Duration
      2. Easing
      3. Begin and Complete
      4. Loop
      5. Delay
      6. Display and Visibility
    5. Using Velocity: Additional features
      1. Reverse Command
      2. Scrolling
      3. Colors
      4. Transforms
    6. Using Velocity: Without jQuery (intermediate)
    7. Wrapping up
  10. Chapter 3. Motion Design Theory
    1. Motion design improves the user experience
    2. Utility
      1. Borrow conventions
      2. Preview outcomes
      3. Distraction over boredom
      4. Leverage primal instincts
      5. Make interactions visceral
      6. Reflect gravitas
      7. Reduce concurrency
      8. Reduce variety
      9. Mirror animations
      10. Limit durations
      11. Limit animations
    3. Elegance
      1. Don’t be frivolous
      2. Your one opportunity to be frivolous
      3. Consider personality
      4. Go beyond opacity
      5. Break animations into steps
      6. Stagger animations
      7. Flow from the triggering element
      8. Use graphics
    4. Wrapping up
  11. Chapter 4. Animation Workflow
    1. CSS animation workflow
      1. Issues with CSS
      2. When CSS makes sense
    2. Code technique: Separate styling from logic
      1. Standard approach
      2. Optimized approach
    3. Code technique: Organize sequenced animations
      1. Standard approach
      2. Optimized approach
    4. Code technique: Package your effects
      1. Standard approach
      2. Optimized approach
    5. Design techniques
      1. Timing multipliers
      2. Use Velocity Motion Designer
    6. Wrapping up
  12. Chapter 5. Animating Text
    1. The standard approach to text animation
    2. Preparing text elements for animation with Blast.js
      1. How Blast.js works
      2. Installation
      3. Option: Delimiter
      4. Option: customClass
      5. Option: generateValueClass
      6. Option: Tag
      7. Command: Reverse
    3. Transitioning text into or out of view
      1. Replacing existing text
      2. Staggering
      3. Transitioning text out of view
    4. Transitioning individual text parts
    5. Transitioning text fancifully
    6. Textual flourishes
    7. Wrapping up
  13. Chapter 6. Scalable Vector Graphics Primer
    1. Creating images through code
    2. SVG markup
    3. SVG styling
    4. Support for SVG
    5. SVG animation
      1. Passing in properties
      2. Presentational attributes
      3. Positional attributes vs. transforms
    6. Implementation example: Animated logos
    7. Wrapping up
  14. Chapter 7. Animation Performance
    1. The reality of web performance
    2. Technique: Remove layout thrashing
      1. Problem
      2. Solution
      3. jQuery Element Objects
      4. Force-feeding
    3. Technique: Batch DOM additions
      1. Problem
      2. Solution
    4. Technique: Avoid affecting neighboring elements
      1. Problem
      2. Solution
    5. Technique: Reduce concurrent load
      1. Problem
      2. Solution
    6. Technique: Don’t continuously react to scroll and resize events
      1. Problem
      2. Solution
    7. Technique: Reduce image rendering
      1. Problem
      2. Solution
      3. Sneaky images
    8. Technique: Degrade animations on older browsers
      1. Problem
      2. Solution
    9. Find your performance threshold early on
    10. Wrapping up
  15. Chapter 8. Animation Demo
    1. Behavior
    2. Code structure
    3. Code section: Animation setup
    4. Code section: Circle creation
    5. Code section: Container animation
      1. 3D CSS primer
      2. Properties
      3. Options
    6. Code section: Circle animation
      1. Value functions
      2. Opacity animation
      3. Translation animation
      4. Reverse command
    7. Wrapping up
  16. Index
  17. Code Snippets
13.58.247.31