Tweet
Tweet

Slide 1

Slide 1 text

The art of UI animation Vinay Raghu @rvinay88

Slide 2

Slide 2 text

The art of UI animation 1. Theory 2. Implementation 3. Tools 4. Techniques

Slide 3

Slide 3 text

The importance of UI animation

Slide 4

Slide 4 text

A. Form of communication • Adds style and personality • Similar to copywriting

Slide 5

Slide 5 text

B. Educate your audience • Creatures of habit • Problem solvers by nature • Helps connect patterns and understand the app

Slide 6

Slide 6 text

By offloading interpretation of changes to the perceptual system, animation allows the user to continue thinking about the task domain, with no need to shift contexts to the interface domain. By eliminating sudden visual changes, animation lessens the chance that the user is surprised. Source: “Animation: From Cartoons to the User Interface,” published in UIST’93

Slide 7

Slide 7 text

The screen is your stage

Slide 8

Slide 8 text

Entry and exit Source: Jeremy Mansfield

Slide 9

Slide 9 text

Entry and exit Source: Foundation for apps

Slide 10

Slide 10 text

State Change Source: Zarin Ficklin

Slide 11

Slide 11 text

Grouping Source: Mark Geyer

Slide 12

Slide 12 text

Context Change

Slide 13

Slide 13 text

Spatial Relationship

Slide 14

Slide 14 text

A cause-effect relationship

Slide 15

Slide 15 text

Feedback for input Source: Ehsan Rahimi, Useyourinterface.com

Slide 16

Slide 16 text

Feedback for input Source: Colin Garven

Slide 17

Slide 17 text

Shake it off Source: Phong Luong Web animation API

Slide 18

Slide 18 text

Add animation capability to UI components

Slide 19

Slide 19 text

CSS animations

Slide 20

Slide 20 text

CSS animations • Transition • Animations • Easing

Slide 21

Slide 21 text

CSS Transition • Transition property – opacity, width, height, translate • Transition duration – in seconds or ms

Slide 22

Slide 22 text

CSS Transition

Slide 23

Slide 23 text

CSS Transition

Slide 24

Slide 24 text

Timing functions • Rate of change over time • Provide effects • Elastic • Spring

Slide 25

Slide 25 text

A tip for easings • Exit ease in • Entry ease out

Slide 26

Slide 26 text

Resources • Cubic Bezier • Easings

Slide 27

Slide 27 text

Performance Source:HTML5 Rocks

Slide 28

Slide 28 text

Performance Source:HTML5 Rocks

Slide 29

Slide 29 text

Resources • High performance animations • Jank Free • CSS Triggers • Will change CSS property

Slide 30

Slide 30 text

W ill change

Slide 31

Slide 31 text

CSS (keyframe) Animation • Only 2 properties • Duration • Name • Define animation separately

Slide 32

Slide 32 text

CSS keyframe animations

Slide 33

Slide 33 text

CSS keyframe animations

Slide 34

Slide 34 text

CSS keyframe animations

Slide 35

Slide 35 text

Performance • Same as before • Stick to opacity and transforms • Avoid animating layout properties

Slide 36

Slide 36 text

Resources • Animate.css • Bounce JS

Slide 37

Slide 37 text

Javascript Animation • Green Sock Animation Platform – GSAP • Famo.us • Demo • Foundation for apps - Motion UI

Slide 38

Slide 38 text

Velocity JS • Replacement for jQuery animate • Well documented (and marketed) • Great performance

Slide 39

Slide 39 text

Velocity JS

Slide 40

Slide 40 text

Velocity JS – UI Pack Demo: Codepen

Slide 41

Slide 41 text

Velocity JS – UI Pack Demo: Codepen

Slide 42

Slide 42 text

Tips • Make it finish quickly • Use them sparingly • Avoid extreme repetition • Experiment Source: Smashing Magazine

Slide 43

Slide 43 text

Other tools – Flinto.com

Slide 44

Slide 44 text

Pixate

Slide 45

Slide 45 text

FramerJS

Slide 46

Slide 46 text

W hat sets it apart? • Teachable animation • Physics based – Mass and weight • Motivation • Metaphor

Slide 47

Slide 47 text

Google Material Design • Paper • Ink • Ripple effect

Slide 48

Slide 48 text

Further Reading • Mark Geyer • Rachel Nabors • Val Head

Slide 49

Slide 49 text

About Me • IncrementalUX • New Haven UX meetup group • Product Developer – Knock Media • http://viii.in • @rvinay88

Slide 50

Slide 50 text

Motion design causes motion sickness