emile.js Examples

Change Colour

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

Run | Reset

Move Inline

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

Run | Reset

Move with Custom Easing

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

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

Run | Reset

After Callback

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