Web Animations

Puppet Icon Designed by Juan Pablo Bravo, The Noun project

Hola!

Suresh (@bsuresh2)

Front-end Developer

Mobile And Application Development team @CtiDigital

vsDeclarative

http://cats-paradise.net/

Imperative

Before we begin...

http://www.visualphotos.com/image/2x2714849/boxer_taping_hands_before_fight

a: A motion picture made by photographing successive

positions of inanimate objects (as puppets or

mechanical parts).

b: A motion picture made from a series of drawings

simulating motion by means of slight progressive

changes.

“Animation”

From webster definition of animation

There is more to it...

http://i.telegraph.co.uk/multimedia/archive/01958/Boxing_1958661b.jpg

Rule

s Principle

s

Tricks

Techniqu

es

Twelve

Commandments

Revelation Icon Designed by Cédric Villain, The Noun project

Gifted to this world

by...

The God

Ollie Johnston

&

Frank ThomasFrom Disney Inc.

● Squash and stretch

● Anticipation

● Staging

● Action and Pose to Pose

● Follow Through and Overlap

● Slow in Slow out

● Arc

● Secondary Motion

● Timing

● Exaggeration

● Solid drawing

● Appeal

Animation by Definition

Object moves from A to B aka

simulating motion by progressive

changes over time.

Squash and stretch

Squash and Stretch

- This gives a sense of weight and flexibility to

drawn objects.

- It can be applied to simple objects, like a

bouncing ball.

- Or more complex constructions, like the

musculature of a human face.

Anticipation

Anticipation

- Prepare the audience for an action,

- Example

- a golfer making a swing has to swing the club back

first.

- This technique can also be used for less

physical actions

Staging

Action and Pose to Pose

Action - CSS Transitions

- Drawing out a scene frame by frame from

beginning to end.

- Creates a more fluid, dynamic illusion of

movement

- Better for producing realistic action

sequences.

Pose to Pose - CSS Keyframes

- This involves starting with drawing a few key

frames, and then filling in the intervals later

- Works better for dramatic or emotional

scenes.

- Hybrid combination can be used as well!

Follow Through and Overlap

● To give the impression that characters follow the laws of

physics, including the principle of inertia.

● Exaggerated use of the technique can produce a

comical effect

● While more realistic animation must time the actions

exactly, to produce a convincing result.

Slow in Slow out aka. Easing

Arc

● Most natural action tends to follow an arched

trajectory.

● Animation should adhere to this principle by

predefined/generated "arcs" for greater

realism.

Secondary Motion

● Emphasize, rather than take attention away

from, the main action.

● If the latter is the case, those actions are

better left out.

Timing

● On a purely physical level, correct timing

makes objects appear to obey the laws of

physics.

● For example, an object's weight determines

how it reacts to an force, like a push based

on reaction.

Exaggeration

● Exaggeration is an effect

especially useful for animation,

IMITATION!

● Imitation of reality depends on

whether one seeks realism or a

particular style.

Appeal

● There are several tricks for making

a animation connect better with

the audience;

● Symmetry, golden ratios! even a

hint of naturalistic fractal

distributions.

All combined together!

A little Demo time!

Wooooah...cool!

Some real life examples

vsDeclarative

http://cats-paradise.net/

Imperative

Declarative Animations

● Performance

● Ease of wrapping

● Motion Principles?!

Extracts from ngeurope famo.us talk by Zack brown, http://codepen.io/redouglas/pen/vCgwc

Declarative Animations - The Hard

part

● Interactions?!

● Complex Orchestrated Animations

● Timing & knowing when things are done

● Design changes

● Authoring, Refactor?!

● Maths/computed physics

Extracts from ngeurope famo.us talk by Zack brown

Imperative animations

● Animations can be orchestrated

● Halted and reversed at any given point

● User interactions

● Computational physics

● External forces like spring, elastic, damping, oscillation!

Imperative animations - The Hard

part

● Performance

● Load times

● Devices

● GPU Layer Access

What Now?!

Browser Challenges

Browser Repaint

Repaints can be tricky!

Spanish fresco restoration - http://www.bbc.co.uk/news/world-europe-19349921

The Browser Repaint!

The Browser Repaint - Inspectors

● Chrome dev tools Timeline

● Mozilla MozAfterPaint

● IE Visual Round Trip Analyser

(VRTA)

The Common Struggle

● Complex DOM

● Web standards

● Accessibility

● Jank Busting

● GPU layer access

Light at end of tunnel

● Various frameworks like Famo.us, KineticJS

GSAP, ionic framework, Material design

● WebGL

● SVG Animations, Bonsai, Snap.svg, RaphealJS, D3

● Web Standards/Browsers RAF (Req Animation frame),

Prefix free, ‘will-change’ property, WebGL support etc.,

Light at end of tunnel

● Tools to help you traverse the Animation universeBookmarklet for Browser independent paint inspection by Lindsey Simon at Google

https://developers.google.com/speed/articles/reflow

CSS Triggers

http://csstriggers.com/

Light at end of tunnel

● Abstractions can be good

● Can also be hinderance?!

Thanks!

&

Any Questions?!

@bsuresh2