Animating the star
@keyframes favorite {
to {
transform: scale(1.3);
}
}
button.activated .icon {
animation-name: favorite;
animation-duration: .3s;
animation-iteration-count: 1;
}
Slide 36
Slide 36 text
button.activated .icon {
animation-name: favorite;
animation-duration: .3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
Keep the state of the last keyframe applied
Slide 37
Slide 37 text
Playing with timing
functions
element {
transition-timing-function: … ;
}
Slide 38
Slide 38 text
Fun with cubic-bezier
Slide 39
Slide 39 text
button.activated .icon {
animation-name: favorite;
animation-duration: .3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(.01, 1.93, 1, 1.6);
}
Keep the state of the last keyframe applied
Slide 40
Slide 40 text
The flyout menu
Slide 41
Slide 41 text
/* hiding the menu */
.menu {
transform: translateX(-155px);
}
Hiding/ Showing the menu
Slide 42
Slide 42 text
/* hiding the menu */
.menu {
transform: translateX(-155px);
}
/*showing it on hove*/
.menu:hover {
transform: translateX(0);
}
Hiding/ Showing the menu
.menu {
transition: transform .3s .25s;
}
Slide 43
Slide 43 text
/* sliding the content */
.menu:hover ~ .content {
transform: translateX(155px);
}
Menu animation on sibling selector
.content, .menu{
transition: transform .3s .25s;
}
Animating the mark
/* scale it down when not visible*/
.checkbox:not(:checked) + label:after {
transform: scale(0);
}
/* scale back to 1 when checked*/
.checkbox:checked + label:after {
transform: scale(1);
}
/* applying transition */
.checkbox + label:after {
transition: transform .4s;
}
•:hover, :active, :focus
•:checked, :invalid, :required, etc.
•: target
•click, focus, blur, submit, etc.
•.className
➔ Create the animations in CSS,
add the class on a JS trigger
CSS JavaScript
Triggers
Slide 56
Slide 56 text
By making state change more natural
opacity & transform = ❤
The two things the browser can « cheaply » animate
learn more about animations properties performance
Slide 57
Slide 57 text
With great power…
On using those great tools with caution
Slide 58
Slide 58 text
By making state change more natural
Keep it Simple
Does it distract my users from accomplishing their tasks?
Slide 59
Slide 59 text
By making state change more natural
Keep it Short
Does it annoy my user? Does it respond well? Is it too long?
Slide 60
Slide 60 text
By making state change more natural
Keep it Meaningful
Does it provide useful information and adds value to the interface ?
Slide 61
Slide 61 text
Communicate & find inspiration
Animations are part of the whole design process
Slide 62
Slide 62 text
The 3 states of our advanced search as communication tool with the developer
Paper prototyping animations in the early stages
Slide 63
Slide 63 text
Using a GIF / video as communication tool with the client
The Holly Animated GIF
Slide 64
Slide 64 text
Testing early raw prototype on real devices (and real users)
Quick & Dirty code prototype
Slide 65
Slide 65 text
By making state change more natural
Slide 66
Slide 66 text
Useryourinterface
Slide 67
Slide 67 text
Credits & Links
• Animation and UX ressources by Rachel Nabors - @rachelnabors
• Animation & UX ressources by Val Head - @vlh
• Interface Animations - A workshop with Mark Geyer
• Google Web Fundamentals on Animations
• (paper) Animation: From Cartoons to the User Interface by Bay-Wei Chang and David Ungar
• (paper) Animation Support in a User Interface Toolkit: Flexible, Robust, and Reusable
Abstractions by Scott E. Hudson and John T. Stasko
Slide 68
Slide 68 text
inpixelitrust.fr — alsacreations.fr
Shared under CC- BY-NC-SA licence
inpx.it/conveyUX2015