Getting Started With Emile

17 Feb 2010 | By Alex Young | Tags animation css

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:

  • duration: The length of the animation in milliseconds
  • after: Code to run after the animation has finished
  • easing: An easing function to control timing that takes a number and is expected to return one

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

blog comments powered by Disqus