DailyJS

Getting Started With Emile

2010-02-17 00:00:00 +0000 by Alex R. Young

Confused about how to use Emile, the
mini-framework for CSS-based JavaScript animation? Well you're in luck,
because I've spent a good few days experimenting with it.

Emile allows you to animate CSS properties, transitioning between them.
You can animate more than one at a time, and stack them using callbacks.
You can also use your own easing functions. That's almost all you need
to know!

Basic Usage

Usage looks like this:

emile(element, CSS properties, { options });

The currently available options, in order of how much you'll need to use
them, are:

Animating a Property

This will fade out the background colour of an element:

emile($('example_1'), 'background-color: rgb(0, 0, 0)', {duration: 500});

Run
| Reset

Moving Something

This will move an element that sits within flow (rather than
position: absolute):

emile($('example_2'), 'margin-left: 200px', {duration: 500});

Run
| Reset

Move with Custom Easing

You can provide an easing function. This allows you to control timing.
This example is based on Thomas Fuchs' presentation at Fronteers
2009
.

function bounce(pos) {
  if (pos < (1 / 2.75)) {
  return (7.5625 * pos * pos);
  } else if (pos < (2 / 2.75)) {
  return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
  } else if (pos < (2.5 / 2.75)) {
  return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
  } else {
  return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
  }
}
emile($('example_3'), 'margin-left: 200px', {duration: 1500, easing: bounce});

Run
| Reset

Combination

Animating more than one property is easy:

emile($('example_4'), 'margin-left: 200px; background-color: #000', {duration: 1500, easing: bounce});

Run
| Reset

After Callback

Using the after option lets you queue an unlimited number of animations:

emile($('example_5'), 'margin-left: 200px; background-color: #000', {
duration: 1500,
easing: bounce,
after: function() { emile($('example_5'), 'margin-left: 0; opacity: 0.0', {duration: 1500}); }});

Run
| Reset

Gotchas

Did you notice the combination demo discolours the rectangle as it
bounces back? The easing function changes the colour as well as
position, which isn't necessarily what you might expect. Keep this in
mind when animating properties with easing functions.

Why Emile?

Emile seems so simple we barely need a library, right? Well... animating
CSS properties isn't that simple. Colours and numbers need to be
normalised, CSS properties need to be converted to the internal names
used by the DOM. What Fuchs provides with Emile is actually a very
shrewd observation of the bare minimum needed to create a workable
animation framework.

emile_demo.html