ux choreography - motion in ui (metarefresh 2016)
TRANSCRIPT
![Page 1: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/1.jpg)
UX ChoreographyM O T I O N I N U I
![Page 2: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/2.jpg)
Saptarshi PrakashProduct Designer Motion Enthusiast Dribbbler Engineer Non-Coder
![Page 3: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/3.jpg)
6 SecondsAttention Span
![Page 4: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/4.jpg)
HumansNot Goldfish
![Page 5: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/5.jpg)
WHAT YOU BUILD WHAT USERS SEE
Your Product
![Page 6: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/6.jpg)
Your Product V2
![Page 7: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/7.jpg)
Types of Motion1.
![Page 8: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/8.jpg)
1. TransitionsPopups, Overlays, Expand / Contract etc.
![Page 9: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/9.jpg)
2. FeedbackInteractions, Button States, Loaders etc
![Page 10: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/10.jpg)
3. Shifting FocusInteractions, Button States, Loaders etc.
![Page 11: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/11.jpg)
4. Delighters :)Loaders, Ambient, Scroll, Parallax etc.
![Page 12: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/12.jpg)
A Big Problem!2.
![Page 13: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/13.jpg)
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
![Page 14: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/14.jpg)
![Page 15: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/15.jpg)
Effects, After Effects3.
![Page 16: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/16.jpg)
![Page 17: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/17.jpg)
Element Properties t=t2t=t1Values
Keyframes
![Page 18: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/18.jpg)
Animatable Properties
Position Scale
Rotation Opacity
![Page 19: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/19.jpg)
0s 1s0.25s 0.50s 0.75s
position: 230,200 rotation: 0x+0.00
position: 1280,200 rotation: 1x+30.00
![Page 20: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/20.jpg)
@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%
![Page 21: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/21.jpg)
0s 1s0.25s 0.50s 0.75s
EASY EASE
![Page 22: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/22.jpg)
0s 1s0.25s 0.50s 0.75s
EASY EASE
LINEAR
![Page 23: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/23.jpg)
Spicing it up!4.
![Page 24: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/24.jpg)
Animation Duration - UI
400 msLarge, complex, full screen transitions
300 msObjects entering the screen
200 msObjects leaving the screen
600 ms
![Page 25: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/25.jpg)
Timing Functions
![Page 26: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/26.jpg)
Timing Functions
![Page 27: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/27.jpg)
EASE-OUT
LINEAR
![Page 28: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/28.jpg)
Okay. But how do I code it?
![Page 29: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/29.jpg)
CSScubic-bezier(x1,y1,x2,y2);
http://cubic-bezier.com/
![Page 30: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/30.jpg)
@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;
}
![Page 31: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/31.jpg)
![Page 32: UX Choreography - Motion in UI (Metarefresh 2016)](https://reader031.vdocument.in/reader031/viewer/2022022413/58ecca7f1a28abe1228b4605/html5/thumbnails/32.jpg)
Questions? :)
saptarshipr saptarshipr