Web Animation using JavaScript · Develop & Design (Develop and Design) by Shapiro, Julian -- Read -- Imperial Library of Trantor

Index

Title Page Copyright Page Dedication Page Acknowledgements 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 Code Snippets

← Prev
Back
Next →

← Prev
Back
Next →