Making a difference with animation
-
Upload
steven-fabre -
Category
Design
-
view
213 -
download
0
description
Transcript of Making a difference with animation
![Page 1: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/1.jpg)
ANIMATIONMAKING A DIFFERENCE WITH
@stevenfabre
![Page 3: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/3.jpg)
twitter.com
![Page 4: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/4.jpg)
twitter.com
![Page 7: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/7.jpg)
ANIMATIONIMPROVES USABILITY
FEELS NATURAL AND SUBTLE
IS A FEEDBACK
![Page 8: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/8.jpg)
INVISIBLEANIMATION
![Page 9: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/9.jpg)
iOS
![Page 10: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/10.jpg)
Path
![Page 11: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/11.jpg)
Stripe
![Page 12: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/12.jpg)
canvas.cm
![Page 13: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/13.jpg)
![Page 14: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/14.jpg)
ACCORDION (BEFORE)
![Page 15: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/15.jpg)
ACCORDION (AFTER)
![Page 16: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/16.jpg)
![Page 17: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/17.jpg)
<h2>Header</h2>!<div>!! <form>!! </form>!</div>!
HTML CSSdiv {!! display: none;!}!div.active {!! display: block;!}!
![Page 18: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/18.jpg)
![Page 19: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/19.jpg)
<h2>Header</h2>!<div>!! <form>!! </form>!</div>!
HTML CSSdiv {!! max-height: 0;!! transition: 0.3s max-height ease-out;!}!div.active {!! max-height: 300px;!}!
![Page 20: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/20.jpg)
![Page 21: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/21.jpg)
<h2>Header</h2>!<div>!! <form>!! </form>!</div>!
HTML CSSdiv {!! max-height: 0;!! transition: 0.3s max-height ease-out;!}!div form {!! opacity: 0;!! transform: scale(0.9);!! transition: 0.3s transform ease-out,!! ! ! ! ! 0.5s opacity ease;!}!div.active {!! max-height: 300px;!}!div.active form {!! opacity: 1;!! transform: scale(1);!}!
![Page 22: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/22.jpg)
ADD LAYOUT (BEFORE)
![Page 23: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/23.jpg)
ADD LAYOUT (AFTER)
![Page 24: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/24.jpg)
![Page 25: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/25.jpg)
<button>!! Add layout!</button>!<div>!</div>!
HTML CSSdiv {!! display: none;!}!div.active {!! display: block;!}!
![Page 26: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/26.jpg)
![Page 27: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/27.jpg)
<button>!! Add layout!</button>!<div>!</div>!
HTML CSSdiv {!! opacity: 0;!! transition: 0.2s opacity ease;!}!div.active {!! opacity: 1;!}!
![Page 28: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/28.jpg)
![Page 29: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/29.jpg)
<button>!! Add layout!</button>!<div>!</div>!
HTML CSSdiv {!! opacity: 0;!! transform: scale(0.2), translateY(-37%);!! transition: 0.2s opacity ease,! 0.2s transform ease-out;!}!div.active {!! opacity: 1;!! transform: scale(1), translateY(0);!}!
![Page 30: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/30.jpg)
COMPLEX TECHNIQUE ≠ GOOD ANIMATION
STATIC USER INTERFACES SUCK
GOOD ANIMATION SHOULD FEEL INVISIBLE
![Page 31: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/31.jpg)
RESOURCESDisney's 12 Principles Of Animation
https://www.youtube.com/watch?v=bHfDEsNLg34 !
Transitional Interfaces - Pasquale D’Silva https://medium.com/@pasql/transitional-interfaces-926eb80d64e3
!
Designing with animation - Pasquale D’Silva https://www.youtube.com/watch?v=TMe0WnkF1Lc
!
Google principles for Material https://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight
!
Animation Principles in UI Design: Understanding Easing - Suresh V. Selvaraj https://medium.com/@sureshvselvaraj/animation-principles-in-ui-design-understanding-easing-bea05243fe3
![Page 32: Making a difference with animation](https://reader034.fdocuments.in/reader034/viewer/2022051313/548c7f63b47959f2248b4766/html5/thumbnails/32.jpg)
RESOURCESAnimate.css - Daniel T. Eden
http://daneden.github.io/animate.css/ !
Smart Transitions In User Experience - Adrian Zumbrunnen http://www.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/
!
Improve the payment experience with animations - Michaël Villar https://medium.com/@michaelvillar/improve-the-payment-experience-with-animations-3d1b0a9b810e