-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
626 lines (535 loc) · 27.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Algorithms for Animation - 3 simple formulas to activate your UI</title>
<meta name="description" content="Algorithms for Animation - 3 simple formulas to activate your UI">
<meta name="author" content="Courtney Hemphill">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/simple.css" id="theme">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/forwardjs.css">
<link rel="stylesheet" href="css/spin.css">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section class="intro" id="fluentconf">
<div class="intro-content">
<h1>Algorithms for Animation</h1>
<h3>Simple formulas to activate your UI</h3>
</div>
<div class="c5-contact">
<img src="img/c5_16_9.png" id="c5-logo"/>
<small>
<a href="http://www.carbonfive.com">Courtney Hemphill</a>
<a href="mailto: [email protected]">[email protected]</a>
<a href="http://twitter.com/chemphill">@chemphill</a>
#fluentconf
</small>
</div>
<span class="spin">
<div class="large circle one"></div>
<div class="large circle two"></div>
<div class="large circle three"></div>
<div class="large circle four"></div>
<div class="large circle five"></div>
<div class="large circle six"></div>
<div class="large circle seven"></div>
<div class="large circle eight"></div>
</span>
<aside class="notes">
simple math that can help elevate your interfaces<br/>
designers can play in code and developers can learn to design<br/>
</aside>
</section>
<section data-state="summary" class="summarySlide">
<div class="circle large one bullet-1" id="bullet-1"><span>Motion perception</span></div>
<div class="circle large two" id="bullet-2"><span>Animations in Interface Design</span></div>
<div class="circle large three" id="bullet-3"><span>Formulas as Foundations</span></div>
<div class="circle large four" id="bullet-4"><span>Frameworks</span></div>
<aside class="notes">
cognative abilities and what humans are natural at<br/>
how to use animation in UI<br/>
math<br/>
Some tools and frameworks you can use<br/>
</aside>
</section>
<section data-state="design-dev">
<h2 style="color: #fff; font-size: 4em; text-indent: -2em;">Design<span class="big" id="bigV">V</span></h2>
<h2 style="color: #fff; font-size: 4em; text-indent: 4em;"> Dev</h2>
<aside class="notes">
The purpose of this talk is two fold.
<br/>The first objective is to outline the basic fundamental of animation and how to put it into practice.
<p>The meta purpose of this talk to to attempt to bridge the gap between developers and designers.</p>
<p>How many of you consider yourselves a designer? Developer? Hybrid?</p>
<p>Designing animations for software has always been a bit decoupled from the implementation.<br/>
translating that onto web or mobile is always a bit tricky.</p>
<p>Developers can also benefit by understanding some of the basic principles behind animation design so they can add in some interesting elements to their interface designs</p>
</aside>
</section>
<section data-state="keyframe">
<img src="img/tweening.gif" class="fjs"/>
<aside class="notes">
<p>Early in Disney's history, they had a bunch of "old men", really young at the time that were looking to explore a new art form</p>
<p>Disney's desire to devise a way of animating that seemed more 'real' in terms of how things moved, and how that movement might be used to express character and personality.</p>
<p>Windsor McCay working at disney, came up with a way to create cartoon animations</p>
<p>Traditional disney animation consisted of the best designers creating a few key animation drawings and then a "inbetweener" would draw in the scenes between. This is where keyframe and tween came to be. </p>
<p>We use software to be the "inbetweener".</p>
<p>So instead of a human determining tbe direction and speed that this figure flips, we've can use math to actually create very organic and natural animations from one state to the next.</p>
</aside>
</section>
<section data-state="gertie">
<h2>Movement creates life</h2>
<video width="960" height="540" controls="controls">
<source src="img/gertie.mp4" type="video/mp4">
</video>
<!-- <a href="http://www.youtube.com/embed/UY40DHs9vc4?start=35&end=55" target="_blank"><img src="img/Gertie.jpg" class="fjs"/></a> -->
<div class="attribution">Gertie the Dinosaur (Winsor McCay, 1914)<br/>https://www.youtube.com/watch?v=UY40DHs9vc4</div>
<aside class="notes">
<p>Take a simple static image with very little personality...</p>
<p> irony is that movies at the time had much jankier movements than cartoons. Tweening could make Gertie actually feel more real than chaplan</p>
</aside>
</section>
<section data-background="img/brain.jpg">
<h2 style="color: #fff; text-shadow: 2px 3px 3px #666;">Animations are cognitive aids</h2>
<aside class="notes">
<p>Motion is something we as humans inately respond to. But we are also very sensitive to it. So it needs to feel right. </p>
Motion is a new and powerful design material that can be used to great affect in communicating with your users.
There are already more and more great resources available to help find best practices in animation in UI
<ul>
<li>Google Material Design</li>
<li>iOS 7 Design Resources</li>
<li>Metro UI CSS</li>
</ul>
</aside>
</section>
<section>
<div style="background: url('img/chair.jpg') no-repeat 50% 100%; height: 570px; width: 900px;">
<h2>Affordance, percieved affordance & signifiers</h2>
</div>
<aside class="notes">
<p>What does it mean to "feel" right?</p>
<p>It is very much based in reality and in our interaction with normal object in our daily lives</p>
<p>Don Noman in "The design of everyday things" talks about affordance</p>
<p>At a very simple level, an affordance describes the relationship of a person to an object</P>
<p>A signifier is a signal that indicates how an object can be used</p>
<p>Things have understood physical properties which we can intuit to mean certain things. this is affordance.</p>
<p>In much the same way, user interfaces can naturally lead people to take the correct steps to accomplish their goals.. this is a signifier or perceived affordance: The concept of affordance derives from cognitive psychology and refers to particular characteristics of an object that guide the viewer.
</p>
<p>"a desirable property of a user interface — software which naturally leads people to take the correct steps to accomplish their goals."</p>
<p>In the world of design, what matters is:
1. If the desired controls can be perceived</br>
A: In an easy to use design, if they can both readily be perceived and interpreted</br>
2. If the desired actions can be discovered</br>
B: In an easy to use design, whether standard conventions are obeyed</br>
</p>
</aside>
</section>
<section data-state="ferrari" data-background="img/ferrari.jpg">
<h2 style="color: #ddd;">Motion detection</h2>
<aside class="notes">
Humans have crap perception of color in their peripheral vision but are great at sensing movement.
Animated transitions between screens convey logical relationships and create an understood "map" of an interface from how things enter and exit a screen.
</aside>
</section>
<section data-state="grid-demo" class="grid-demo">
<h2>Auto Loading</h2>
</section>
<section data-state="buttons">
<div class="buttons">
<div id="color-btn-demo" class="animated">Right</div>
<div id="motion-btn-demo">Right</div>
</div>
<script>
document.getElementById('motion-btn-demo').addEventListener('click', function(){this.className = 'animated shake'; this.innerHTML = 'Wrong';});;
document.getElementById('color-btn-demo').addEventListener('click', function(){this.className = 'wrong'; this.innerHTML = 'Wrong';});;
</script>
<aside class="notes">
<p>playfulness</p>
<p>feedback</p>
<p>It’s nice to feel like things are reacting to what you’re doing. </p>
</aside>
</section>
<section>
<h2>Navigation</h2>
</section>
<section>
<img src="img/ScrollingNoAnimation.gif" class="fjs"/>
<div class="attribution">Adrian Zumbrunnen <br/> http://www.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/</div>
</section>
<section>
<img src="img/ScrollingAnimated.gif" class="fjs"/>
<div class="attribution">Adrian Zumbrunnen <br/> http://www.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/</div>
</section>
<section>
<h2>Progressive Disclosure</h2>
</section>
<section>
<img src="img/progressive_disclosure.gif" class="fjs"/>
<div class="attribution">Colin Garven <br/> https://dribbble.com/ColinGarven</div>
<aside class="notes">
<p>guidance</p>
<p>nudging - feedforward</p>
<p>continuity & pace</p>
</aside>
</section>
<section>
<h2>Context</h2>
</section>
<section>
<img src="img/Twitter.gif" class="fjs"/>
<aside class="notes">
<p>Tweetie</p>
<p>patent</p>
<p>continuity & pace</p>
</aside>
</section>
<section>
<h2>How do you communicate animation ideas?</h2>
<aside class="notes">
Wireframes only communicate very extreme states of animations - the devil is in the details<br/>
<i>Wireframes and static comps leave us stuck in extreme states: "When the user taps on the menu icon, the panel will slide down from the top of the page. When the user clicks the thumbnail, the video will enlarge full screen. And then it hit me."</i>
</aside>
</section>
<section>
<h2>Math</h2>
<p><img src="img/math_heart.jpg" class="fjs"/></p>
<aside class="notes">
<p>Animation has its roots in some very easy math functions.</p>
<p>Coming up with an easy way to play around with animations can actually be a bit tricky without pulling out Flinto or Adobe Quartz or some bloated framework. </p>
<p>I am assuradly not good at math. I can get by, about as well as I can get by in paris with my french. which is to say, i can communicate, i can have some fun, and I can get what I want to get across across. I feel about the same with math and happily have found ways to have fun with it in my coding.</p>
</aside>
</section>
<section data-state="basic-one">
<h2>Moving pixels</h2>
<pre>
var ball = document.getElementById('ball');
var start = 0;
var basicAnimation = function (e) {
<em>start += 12;</em>
<em>basic.style.left = start + "px";</em>
if (Math.abs(start) <= 800) { requestAnimationFrame(basicAnimation); }
}
</pre>
<div class="basic-one-slide-background"><div id="basic-one"></div></div>
<aside class="notes">
<p>Simple addition of one pixel on another.</p>
<p>Doesn't give much insight into where you are at within the animation - you know position but not necessarily how much progress has been made.</p>
<p>Animation gets interesting when you can start to think of things in terms of percent changed</p>
</aside>
</section>
<section>
<h2>The basics of animation: interpolation</h2>
<!-- <p>Start, Change, Time, Duration</p> -->
<pre>valueAtTime = (end - start) * time / duration + start</pre>
<aside class="notes">
<p>One simple formula describes all animation. <p>
<p>method of constructing new data points within the range of a discrete set of known data points.</p>
<p>Once you understand this, you can manipulate your animation without limit.</p>
<p>It is all based on time. You need to know where you are going to start, where you want to go (change), where you are currently, and what the total duration should be for the animation</p>
</aside>
</section>
<section>
<h2>Breaking it down to [0-1]</h2>
<pre>valueAtTime = (end - start) * time / duration + start</pre>
<p>change = end - start</p>
<p>percent complete = time/duration</p>
<aside class="notes">
<p>when making some kind of animation, we know the starting and ending positions, and want to transition between these. All of these can be converted to interpolation from 0 to 1.</p>
- thinking about things in terms of percent complete
<p>you are trying to map everything into a point of reference between 0 and 1</p>
<p>multiply any value between 0 and 1 with another value between 0 and 1, and the result is guaranteed to be between 0 and 1.</p>
this will then work for everything - you will have your different parameters like position, color, shape, etc but you can map them to a value between 0 to 1
<p>So Interpolation allows you to start talking more generally and easily porting over whatever you need to put motion to into a very easy range of reference.</p>
</aside>
</section>
<section data-state="basic-two">
<h2>Timing</h2>
<pre>
var time, startTime;
var start = function () {
startTime = new Date().getTime();
run();
}
var run = function () {
time = new Date().getTime() - startTime;
<em>div.style.left = 900 * time / 1000 + "px";</em>
if(value < 1) requestAnimationFrame(run);
}
</pre>
<div class="basic-one-slide-background"><div id="basic-two"></div></div>
<aside class="notes">
<p>Now we have a consistent number to work with. All animations will fall in a range from [0-1]. The percentage of completion… </p>
<p>What a property value is at any given time isn't nearly as important as how that property changed from its initial value to the final value over the lifetime of the animation. </p>
</aside>
</section>
<section data-state="basic-three">
<img src="img/percentage.png" class="fjs" style="width: 30%"/>
<pre>
//valueAtTime = (end - start) * time / duration + start
<em>div.style.left = 900-0 * time / 1000 + 0 + "px";</em>
</pre>
<div class="basic-one-slide-background"><div id="basic-three"></div></div>
<aside class="notes">
Consistent, unvarying progress from beginning to end. Too mathmatetical... need something with some variety
</aside>
</section>
<section>
<p>
<blockquote>"Using a term like nonlinear science is like referring to the bulk of zoology as the study of non-elephant animals."</blockquote>
</p>
- Stanislaw Ulam
<aside class="notes">
<p>The vast majority of mathematical equations and natural phenomena are nonlinear, with linearity being the exceptional, but important, case.</p>
nothing in our world actually moves like that<br/>
- nothing in this world has perfectly maintained speed except in vacuums<br/>
- we don’t live in vacuums, we live with friction and barriers and drag<br/>
- we accelerate and decelerate at differing rates<br/>
- we experience yaw, torque, etc<br/>
<p>With Fermi and John Pasta, Ulam studied the Fermi–Pasta–Ulam problem, which became the inspiration for the vast field of Nonlinear Science. He is probably best known for realising that electronic computers made it practical to apply statistical methods to functions without known solutions, and as computers have developed, the Monte Carlo method has become a ubiquitous and standard approach to many problems.</p>
</aside>
</section>
<section>
<h2>Natural movement</h2>
<p>Torque, drag, spin, friction</p>
</section>
<section>
<h2>Easing functions</h2>
<img src="img/easeInCubic.png" class="fjs"/>
<aside class="notes">
Same beginning and end but with variation in the speed of execution. Start slow and move more quickly.
</aside>
</section>
<section>
<h2>Easing</h2>
<pre>
valueAtTime = (end - start) * easingfunction([0-1]) + start
</pre>
<p>Change in property times (some float) plus beginning value.</p>
<aside class="notes">
Easing functions define the rate at which your property changes. All that matters is what percentage of the final property value has been reached at any given point during the animation's lifetime.
</aside>
</section>
<section data-state="ease-anim">
<h2>Power Functions - EaseIn</h2>
<img src="img/easeInCubic.png" class="fjs" style="width: 30%"/>
<pre>
var run = function () {
time = new Date().getTime() - startTime;
div.style.left = 900 * <em>Math.pow(percentChange, 3)</em> + "px";
if(time / duration < 1) requestAnimationFrame(run);
}
</pre>
<div class="basic-one-slide-background"><div id="ease-anim"></div></div>
<aside class="notes">
Now we get to start playing around with our animations. We can make them more organic and we can tweak our values to produce exactly the effect we are after.
A great (and simple) starting point is the power function.
You can put any power in there and see if it meets your needs.
So that is kinda sudden... and you don't always need to ferarri ... although who doesn't want the ferrari ...
</aside>
</section>
<section data-state="ease-out-anim">
<h2>Power Functions - EaseOut</h2>
<img src="img/eastOutCubic.png" class="fjs" style="width: 30%"/>
<pre>
var run = function () {
time = new Date().getTime() - startTime;
div.style.left=(endX - startX)* <em>(1 - Math.pow(1 - (t / d), 3))</em> +startX+"px";
if(time / duration < 1) requestAnimationFrame(run);
}
</pre>
<div class="basic-one-slide-background"><div id="ease-out-anim"></div></div>
<aside class="notes">
We see this a little more used on the web. the slide in. This is back to the feeling that when a person walks into your periferral vision they already have velocity and then they slow down to a stop.
</aside>
</section>
<section data-state="ease-in-anim">
<h2>Trig! ... sine :)</h2>
<img src="img/easeInSine.png" class="fjs" style="width: 30%"/>
<pre>
var run = function () {
time = new Date().getTime() - startTime;
div.style.left=(endX - startX)* <em>Math.sin( t/d * Math.PI / 2 )</em> +startX+"px";
if(time / duration < 1) requestAnimationFrame(run);
}
</pre>
<div class="basic-one-slide-background"><div id="ease-in-anim"></div></div>
<aside class="notes">
So what if you need a bit of nuance, it isn't a ferrari and it isn't the enter and exit stage left scenario? Trig and physics are incredibly powerful in representing natural and organic movement.
It is subtle, but the devil is in the details
<p>
Introducing time and motion changed everything for me, because what I realized was that it gave you precise control over the emotion you are trying to convey and how an audience will interpret your message. I’d often look to title sequences for inspiration because I was fascinated with how a 30 second or 3 minute sequence had the ability to set the tone for an entire film and foreshadow what was going to happen.
</p>
</aside>
</section>
<section>
<h2>Follow Through</h2>
<p> > 1</p>
<aside class="notes">
<p>We can also go beyond that 0-1 range</p>
<p>One of the 12 Basic Principles of Animation is Follow through or elastic movement. </p>
<p>Follow through refers to an animation technique where things don't stop animating suddenly. They exceed their final target slightly before snapping back into place. This useful technique is something that can only be done by going beyond the 0-1 range.</p>
</aside>
</section>
<section data-state="elastic-anim">
<h2>Elasticity</h2>
<img src="img/easeOutBack.png" class="fjs" style="width: 30%"/>
<pre>
var run = function () {
time = new Date().getTime() - startTime;
div.style.left=(endX - startX)* <em>k * k * ( ( s + 1 ) * k - s )</em> +startX+"px";
if(time / duration < 1) requestAnimationFrame(run);
}
</pre>
<div class="basic-one-slide-background"><div id="elastic-anim"></div></div>
<aside class="notes">
The math is getting a little more complicated now ... but the basic underlying equation is still the same. you can pull most of the necessary functions from <strong>Robert Penner's easing functions</strong> or just check the source for tween.js. then you just plug and play and adjust values.
</aside>
</section>
<section data-state="bounce-anim">
<h2>Bounce</h2>
<img src="img/easeOutBounce.png" class="fjs" style="width: 30%"/>
<pre class="small-code">
var easeFunc = function(k) {
if ( k < ( 1 / 2.75 ) ) {
return 7.5625 * k * k;
} else if ( k < ( 2 / 2.75 ) ) {
return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
} else if ( k < ( 2.5 / 2.75 ) ) {
return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
} else {
return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375; } }
div.style.left=(endX - startX)* <em>easeFunc(t/d)</em> +startX+"px";
</pre>
<div class="basic-one-slide-background"><div id="bounce-anim"></div></div>
<aside class="notes">
Bounce is everywhere, it is playful and noticable without being obnoxious... like blinking
</aside>
</section>
<section>
<iframe src="birds-on-a-wire.html" width="920" height="800" frameborder="0"></iframe>
<small><a href="birds-on-a-wire.html" target="_blank">Birds on a Wire</a></small>
</section>
<section>
<h2>Tools</h2>
<aside class="notes">
So you can see that when animations start to get complicated, the math does start to get a bit more complicated as well. It is worthwhile to take the opportunity to play around with it but there are also lots of options out there to take care of it for you as well. Given the basic knowledge you have now, you can understand better what is going on under the hood.
</aside>
</section>
<section>
<h2>Software</h2>
<ul>
<li>Adobe Edge Animate</li>
<li>Adobe After Effects</li>
<li>Flinto</li>
<li>Keynote</li>
<li>Quartz</li>
</ul>
<aside class="notes">
Total control, but still a handoff point to developers.
</aside>
</section>
<section>
<h2>JS Frameworks</h2>
<ul>
<li>Framer.js</li>
<li>Tween.js</li>
<li>GSAP (Greensock)</li>
<li>jQuery</li>
</ul>
<aside class="notes">
Animating in JavaScript does give you a lot of control: starting, pausing, reversing, interrupting and cancelling are trivial. Some effects, like parallax scrolling, can only be achieved in JavaScript.
</aside>
</section>
<section>
<h2>CSS</h2>
<ul>
<li>Animate.css</li>
<li>CSSanimate.com/<li>
<li>SASS/LESS mixins</li>
</ul>
<img src="img/chrome-inspect.png"/>
<aside class="notes">
CSS: browser can optimize the animation. pushed to GPU.
<p>position, scale, rotation and opacity</p>
great for simple animation on interface elements that don't have a lot of interdependency in their transitions
</aside>
</section>
<section>
<h2>Performance</h2>
<aside class="notes">
<p>As far as performance, there is a lot to consider before you can just say CSS is better than JS.
CSS gets touted as being more performant because it offloads calculations to a different thread and harnesses the GPU </p>
<p>JS translate3d or matrix3d.</p>
<p>specific to Transforms (scale, rotation, translation, and skew) and opacity</p>
<p>work is in the initial rendering and document layout, css layer won't have to redraw the full canvas. </p>
</aside>
</section>
<section>
<h2>Go forth and animate!</h2>
<aside class="notes">
So I'd like to encourage you all to go out and play with animations and with these formulas. See what you can do with just an HTML page and some simple JS functions. Play around with the values and find out what types of animations appeal to you.
</aside>
</section>
<section>
<h2>References</h2>
<ul>
<li><a href="http://easings.net/">Easing Functions</em></a></li>
<li><a href="http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107">Don Norman - The Design of Everyday Things</em></a></li>
<li><a href="http://www.google.com/design/spec/material-design/introduction.html">Google Material Design</em></a></li>
<li><a href="https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Animation.html#//apple_ref/doc/uid/TP40006556-CH57-SW1">Apple Human Interface Design</em></a></li>
<li><a href="http://en.wikipedia.org/wiki/12_basic_principles_of_animation">Disney's Twelve Basic Principles of Animation</em></a></li>
<li><a href="http://carbonfive.github.io/html5-playground/birds-on-a-line.html">Birds on a Wire</em></a></li>
</ul>
</section>
<section>
<img src="img/c5_16_9.png" class="fjs"/>
<small><a href="http://www.carbonfive.com">Courtney Hemphill</a> <br/>
<a href="http://twitter.com/chemphill">@chemphill</a><br/>
<a href="mailto: [email protected]">[email protected]</a></small>
</section>
</div>
<div id="d-v-d-container">
<div id="design-versus" class="d-v-d"></div>
<div id="d-v-d-slider"><div id="dev-versus" class="d-v-d">asdfasdf</div></div>
</div>
<div id="show-grid-demo"><iframe src="grid-demo.html" width="100%" height="600" frameborder="0"></iframe></div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script src="js/customEvents.js"></script>
<script>
Reveal.initialize({
controls: false,
progress: false,
history: true,
center: true,
theme: Reveal.getQueryHash().theme,
transition: Reveal.getQueryHash().transition || 'default',
// Optional libraries used to extend on reveal.js
dependencies: [ { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } } ]
});
Reveal.configure({ keyboard: { 32: checkForSpace } });
</script>
</body>
</html>