Making things move
When you are a front-end developer
Why ?
- Easing
- Composing
- Staggering
Robert Penner's easing functions
function linear(t, from, change, duration) {
return from + change * t / duration;
}
Robert Penner's easing functions
function expoOut(t, b, c, d) {
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
}
Most of the time you can/should use In and Out
My personnal favorite is
Expo.easeInOut
No ease in on user interaction
Be careful between tweens
Nope (ish) EaseInOut + EaseInOut + EaseInOut
Yep EaseIn + Short EaseNone + EaseOut
Time it properly
0.4s < Duration < 0.8s
Except on special easings like Bounce, Back or Elastic where you need longer durations
Very Simple frame by frame easeOut
value += (destValue - value) * 0.1;
When animating multiple properties of a given target, to compose is to animate each property one after another instead of all at once.
scaleX and scaleY and x and y
scaleX then x then scaleY then y
In a group of animation Staggering is adding a small delay between each animation start.
Simultaneous = no time to follow the animation
Staggered = discover each item one at a time
Interval != Animation duration
My usual interval < 0.1s