- Gilmore Davidson, JS developer at Atlassian
- SydJS junkie and occasional site updater
- @iamnotyourbroom
- github.com/gilmoreorless
- Hey look! “Bullet” points

A Brief History of Time

A Brief History of Distance/Time

A Brief History of Easing

- Flash developer, author of Programming Macromedia Flash MX
- Dissatisfied with standard programmatic animation methods
- Created the first flexible, reusable Easing functions
- …which are the cornerstone of all JS animation techniques today

In other words…

- Don’t ignore your Flash friends, they have much to teach

```
Math.easeInQuad = function (t, b, c, d) {
return c*(t/=d)*t + b;
};
```

Variables minified for AS1 interpreter quirks.

Variables with longer names take longer to look up than variables with short names, because of the interpreter’s internal hashing procedure.

Robert Penner

Perfect for byte-conscious JS!

jQuery & jQuery UI

Penner’s system copied almost exactly.

```
Math.easeInOutSine = function (t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
};
```

```
jQuery.easing.swing = function( p, n, firstNum, diff ) {
return ( ( -Math.cos( p*Math.PI ) / 2 ) + 0.5 ) * diff + firstNum;
}
```

Clandestine rendezvous between secret agents:

**Mr A.** – Animation

**Mr E.** – Easing

Animation sets the time, Easing sets the place

Animation sets the time, Easing sets the place

At its most basic level, an easing function takes the amount of time that has elapsed for an animation, and returns a new position for the animation based on a function of the time.

Confused? Bored?

Never fear, shiny graphs to the rescue!

Sine

Quad

Cubic

Quart

Quint

Expo

Circ

Back

Bounce

Elastic

Raphaël, Dojo & Scriptaculous

Single parameter for percentage – everything else should be handled by the framework.

```
function (n) {
return pow(n, 1.7);
}
```

```
function(pos) {
return (-Math.cos(pos*Math.PI)/2) + .5;
}
```

```
function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
}
```

```
function (n) {
var s = 1.70158;
return n * n * ((s + 1) * n - s);
}
```

Easing functions shouldn’t have to care about the start/end values, only the percentage matters.

1.70158 = Penner’s Magic Number.

MooTools & D3

DRY – maximum code reuse.

```
['Quad', 'Cubic', 'Quart', 'Quint'].each(function(transition, i){
Fx.Transitions[transition] = new Fx.Transition(function(p){
return Math.pow(p, i + 2);
});
});
```

```
function d3_ease_reverse(f) {
return function(t) {
return 1 - f(1 - t);
};
}
function d3_ease_reflect(f) {
return function(t) {
return .5 * (t < .5 ? f(2 * t) : (2 - f(2 - 2 * t)));
};
}
```

Once you know the workings, you can manipulate.

```
$.easing.tardis = function easeTardis(t) {
var steps = 9,
curStep = ~~(t * steps),
stepDiff = curStep / steps,
newPerc = (t - stepDiff) * steps,
newEasing = $.easing.easeInOutSine(newPerc);
if (curStep % 2) {
newEasing = 1 - newEasing;
}
return newEasing * .5 + t / 2;
}
$(elem).animate({opacity: 1}, 10000, 'tardis');
```

CSS easing functions based on bezier curves.

```
transition-timing-function: ease-in-out;
/* Equivalent to */
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
```

(Graph from matthewlein.com/ceaser)

Raphaël supports the cubic bezier syntax, so there is relevance after all.

`elem.animate(params, duration, "cubic-bezier(0.42, 0, 0.58, 1)")`

James Padolsey’s Interactive Easing Demo