Web Animation using JavaScript: Develop & Design

advertisement

Web Animation using JavaScript: Develop & Design

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

advertisement

    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.”

Software Testing: Testing Across the Entire Software Development Life Cycle

advertisement

Table of contents

Contents

1. Advantages of JavaScript Animation

JavaScript vs. CSS animation

Great performance

Features

Maintainable workflows

Wrapping up

2. Animating with Velocity.js

Types of JavaScript animation libraries

Installing jQuery and Velocity

Using Velocity: Basics

Using Velocity: Options

Using Velocity: Additional features

Using Velocity: Without jQuery (intermediate)

Wrapping up

3. Motion Design Theory

Motion design improves the user experience

Utility

Elegance

Wrapping up

4. Animation Workflow

CSS animation workflow

Code technique: Separate styling from logic

Code technique: Organize sequenced animations

Code technique: Package your effects

Design techniques

Wrapping up

5. Animating Text

The standard approach to text animation

Preparing text elements for animation with Blast.js

Transitioning text into or out of view

Transitioning individual text parts

Transitioning text fancifully

Textual flourishes

Wrapping up

6. Scalable Vector Graphics Primer

Creating images through code

SVG markup

SVG styling

Browser support for SVG

SVG animation

Implementation example: Animated logos

Wrapping up

7. Animation Performance

The reality of web performance

Technique: Remove layout thrashing

Technique: Batch DOM additions

Technique: Avoid affecting neighboring elements

Technique: Reduce concurrent load

Technique: Don’t continuously react to scroll and resize events

Technique: Reduce image rendering

Technique: Degrade animations on older browsers

Find your performance threshold early on

Wrapping up 

Download full PDF in Comment section

advertisement