DailyJS

Getting Started With Emile

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

animation css

Getting Started With Emile

Posted by Alex R. Young on .
Featured

animation css

Getting Started With Emile

Posted by Alex R. Young on .

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