JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 568
  • Score
    100M100P100Q91752F

no-thrills stand-alone CSS animation JavaScript framework

Package Exports

  • emile

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (emile) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Émile

A Stand-alone JavaScript CSS animation mini-framework

  • Doesn't need a JavaScript framework
  • Full set of CSS properties for animation (length-based and colors)
  • Easing and callbacks
  • uses native CSS transitions for hardware acceleration when available
  • tiny 1.6k

Follow Émile on Twitter and see the introduction video of Émile from Fronteers 2009.

Browser Support

Émile currently targets the following platforms:

  • IE 6, 7, 8, 9
  • Firefox 1.5, 2, 3, 4
  • Safari 2, 3, 4, 5
  • Opera 9, 10, 11
  • Chrome 1 - 10

Documentation

One method:

emile(element, options, after)

Parameters

  • element (id | element) - element to which the animation will be applied
  • options (object) - style properties which will be applied after the animation is finished
    • for some properties you'll need to define defaults on your page's css
    • duration (Number) - duration of the animation in milliseconds
    • after (Function) - a function which will be executed after the animation is finished
    • easing (Function|String) - easing function for the animation. Receives one argument pos which indicates position in time between animation's start and end. Note that easing functions will bypass the native CSS-transitions.
  • after (Function) - optional; a callback that will be excuted after everything is done (in addition to options.after)

Example

emile('example', {
  left: 100,
  opacity: 1,
  duration: 500,
  easing: easeFn,
  after: function () {
    console.log('done!');
  }
});

Building

Building Émile requires GNU 'make' and Node.js to run the JSHint linter and Uglify compiler. It's then quite simple:

git clone git://github.com/madrobby/emile.git
cd emmile
git submodule update --init
make

Tests

open tests/emile.html

License

Émile is is licensed under the terms of the MIT License, see the included MIT-LICENSE file. Émile borrows its name from Émile Kohl.

Contributors