ux choreography - motion in ui (metarefresh 2016)
TRANSCRIPT
UX ChoreographyM O T I O N I N U I
Saptarshi PrakashProduct Designer Motion Enthusiast Dribbbler Engineer Non-Coder
6 SecondsAttention Span
HumansNot Goldfish
WHAT YOU BUILD WHAT USERS SEE
Your Product
Your Product V2
Types of Motion1.
1. TransitionsPopups, Overlays, Expand / Contract etc.
2. FeedbackInteractions, Button States, Loaders etc
3. Shifting FocusInteractions, Button States, Loaders etc.
4. Delighters :)Loaders, Ambient, Scroll, Parallax etc.
A Big Problem!2.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae nisi nec mauris porta blandit non in ex. Cras vulputate tellus at feugiat posuere. In hac habitasse platea dictumst. Pellentesque lobortis, enim ac tincidunt placerat, quam urna bibendum mauris, at volutpat lacus eros at diam.
Construction Linked Plan
Sed ac arcu volutpat, cursus metus eget, ornare orci. Praesent quis nulla sapien. Morbi laoreet purus eu nunc accumsan vulputate. Integer a facilisis mauris, non ornare felis. Sed laoreet, enim eu efficitur.
Downpayment Plan
In hac habitasse platea dictumst. Pellentesque lobortis, enim ac tincidunt placerat, quam urna bibendum mauris, at volutpat lacus eros at diam.
Flexi Plan
Sed ac arcu volutpat, cursus metus eget, ornare orci. Praesent quis nulla sapien. Morbi laoreet purus eu nunc accumsan vulputate. Integer a facilisis mauris, non ornare felis. Sed laoreet, enim eu efficitur.
Possession Linked Plan
Developer Payment Plans
Effects, After Effects3.
Element Properties t=t2t=t1Values
Keyframes
Animatable Properties
Position Scale
Rotation Opacity
0s 1s0.25s 0.50s 0.75s
position: 230,200 rotation: 0x+0.00
position: 1280,200 rotation: 1x+30.00
@keyframes wheel-rotate{ 0%{
left: 230px; transform: rotate(0deg);
} 100%{
left: 1280px; transform: rotate(390deg);
} }
CSS
.wheel{ animation: wheel-rotate 1s;
}
0 100%25% 50% 75%
0s 1s0.25s 0.50s 0.75s
EASY EASE
0s 1s0.25s 0.50s 0.75s
EASY EASE
LINEAR
Spicing it up!4.
Animation Duration - UI
400 msLarge, complex, full screen transitions
300 msObjects entering the screen
200 msObjects leaving the screen
600 ms
Timing Functions
Timing Functions
EASE-OUT
LINEAR
Okay. But how do I code it?
CSScubic-bezier(x1,y1,x2,y2);
http://cubic-bezier.com/
@keyframes card1-slide{ 0%{
top: 1500px; transform: rotate(-20deg);
} 100%{
top: 200px; transform: rotate(0deg);
} }
.card1{ animation: card1-slide 1.5s cubic-bezier(.42,0,.58,1) forwards;
}
@keyframes card2-slide{ 0%{
top: 1500px; transform: rotate(-20deg);
.card2{ animation: card2-slide 1.5s 0.2s cubic-bezier(.42,0,.58,1) forwards;
}
Questions? :)
saptarshipr saptarshipr