Making things move

When you are a front-end developer

Position

Rotation

Scale

Color

Mix them up carefully

Nope

Yep

Why ?

  • Easing
  • Composing
  • Staggering

I. Easing

Ease Types

No easing

Ease in

Ease out

Ease in and out

Robert Penner's easing functions



function linear(t, from, change, duration) {
    return from + change * t / duration;
}

Linear.easeNone

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;
}

Expo.easeInOut

Choose your own

Most of the time you can/should use In and Out

My personnal favorite is

Expo.easeInOut

No ease in on user interaction

Nope

EaseInOut

Yep

EaseOut

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;

III. Composing

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

II. Staggering

In a group of animation Staggering is adding a small delay between each animation start.

NOPE

YEP

Simultaneous = no time to follow the animation

Staggered = discover each item one at a time
Interval != Animation duration

My usual interval < 0.1s

IV. Going further

Smear

Physics

3D

That's it !