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

Sneaky images

Technique: Degrade animations on older browsers

Problem

Solution

Find your performance threshold early on

Wrapping up

CHAPTER 8 ANIMATION DEMO

Behavior

Code structure

Code section: Animation setup

Code section: Circle creation

Code section: Container animation

3D CSS primer

Properties

Options

Code section: Circle animation

Value functions

Opacity animation

Translation animation

Reverse command

Wrapping up

Index