Download - Making a difference with animation
ANIMATIONMAKING A DIFFERENCE WITH
@stevenfabre
twitter.com
twitter.com
ANIMATIONIMPROVES USABILITY
FEELS NATURAL AND SUBTLE
IS A FEEDBACK
INVISIBLEANIMATION
iOS
Path
Stripe
canvas.cm
ACCORDION (BEFORE)
ACCORDION (AFTER)
<h2>Header</h2>!<div>!! <form>!! </form>!</div>!
HTML CSSdiv {!! display: none;!}!div.active {!! display: block;!}!
<h2>Header</h2>!<div>!! <form>!! </form>!</div>!
HTML CSSdiv {!! max-height: 0;!! transition: 0.3s max-height ease-out;!}!div.active {!! max-height: 300px;!}!
<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);!}!
ADD LAYOUT (BEFORE)
ADD LAYOUT (AFTER)
<button>!! Add layout!</button>!<div>!</div>!
HTML CSSdiv {!! display: none;!}!div.active {!! display: block;!}!
<button>!! Add layout!</button>!<div>!</div>!
HTML CSSdiv {!! opacity: 0;!! transition: 0.2s opacity ease;!}!div.active {!! opacity: 1;!}!
<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);!}!
COMPLEX TECHNIQUE ≠ GOOD ANIMATION
STATIC USER INTERFACES SUCK
GOOD ANIMATION SHOULD FEEL INVISIBLE
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
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
