Working on a large team means ability to iterate is key
//---- timing ----//
$class-slug: t !default;
@for $i from 1 through 7 {
.#{$class-slug}-#{$i} {
animation-duration: 0.8 - (0.1s * $i);
}
}
Like h1, h2
//---- ease ----//
$easein-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
$easeout-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$easein-back: cubic-bezier(.57, .07, .6, 1.71);
$easeout-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
Brand-specific
.entrance {
animation-timing-function: $easeout-quad;
}
.entrance-emphasis {
animation-timing-function: $easeout-back;
}
.exit {
animation-timing-function: $easein-quad;
}
.exit-emphasis {
animation-timing-function: $easein-back;
}
Meaningful classes
//animations
@keyframes pop {
0% {
transform: scale(0.9) translateZ(0);
}
100% {
transform: scale(1) translateZ(0);
}
}
.pop {
animation-name: pop;
@extend .anim-fill-both;
}
Only what you need
.anim-fill-both {
animation-fill-mode: both;
}
Animation Fill Mode or Common Uses
This pen.
Thumbnails-
Notes for yourself
Storyboards-
Notes for collaboration
Low Fidelity Prototypes
Show the motion
Low Fidelity Prototypes-
screenshot to build on top of
Principle
FramerJS
After Effects
Keynote
Straight up code
Get small projects off the ground to build trust
Align with the why
Have an opinion
Adhering to your branding means motion solves the problem for your users.
this pen.
What needs to change, what doesn't
onMouseOver || onTouchStart
UX Animation & UX Choreography
Kathy Sierra- Badass: Making Users Awesome
From this CSS-Tricks Article
modals suck!
it's not them, it's their typical UX pattern!
Viget did an experiment and found that despite some individual variation, novel loaders as a whole had a higher wait time and lower abandon rate than generic ones
Treehouse: Percieved Performance
Right tool for the right job
@mixin accelerate() {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
.foo {
@include accelerate(transform);
}
src: Wealthfront
Case Study: Netflix
this pen.
but...