madrobby / emile Goto Github PK

..would be nice now that it has landed in FF and Chrome.

https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
jQuery pull req: jquery/jquery#298

Hi,

I appriciate this emil.

I have tried to set z-index, but it shows css error.
Am I doing wrong or ?

emile('test2', 'left:300px;z-index:4;padding:10px;border:50px solid #ff0000', {
duration: 500,
after: function(){
emile('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', {
duration: 4000, easing: bounce
});
}
});

This breaks and eventually crashes the browser:

<h1 id="header">Hello, World!</h1>
<script type="text/javascript" charset="utf-8">
  emile('header', 'letter-spacing: -19px');
</script>

Background images can't be animated with background-position.

sort of a major use-case for animation. this basically doesn't work in <= IE8
i tried taking a stab at this in a branch, but having a hard time parsing out what some of this code means.

IE7 chokes on
v.push(parseInt(c.substr(1+j_2,2), 16))
in the *color_ function as c is not defined when processing colors like “#ffff99″.

Changing this to
v.push(parseInt(arguments[i].substr(1+j*2,2), 16))
looks to resolve this issue.

please add

return interval;

to the

container[emile] = function(){ .. }

for use as

var anim = emile('card', 'left:-320px', {duration: 2000});  // from example
clearInterval(anim);  // when need to stop

The RegEx should be /^[-\d.]+/

I'm using FF 3.5.7. I'm not sure if this bug is unique to my browser/setup or not.

To reproduce:
emile( el, 'margin-top:120px;', {duration:150, after:function() { console.log('here'); }} );

"here" is printed twice.

Also, one more unrelated thing: options.after would be significantly more useful if you made one small change to emile.js:

Change line 48 from:
if(time>finish) { clearInterval(interval); opts.after && opts.after(); }

To:
if(time>finish) { clearInterval(interval); opts.after && opts.after.call(el, opts); }

This will make "this" refer to the element being animated in the callback and also provide the options as an argument.

ex:
emile( el, 'margin-top:120px;', {duration:150, after:function() { this.className='justanimated'; }} );

Love emile! Great job!

callback after native animation is not fired because transitionEnd event for opera is OTransitionEnd, not transitionEnd

The props variable seems a little needless to be a string that is then split to be an array when an array would suffice in the first place.

props = [ 'property','property'....];

http://jsperf.com/split-or-squarebracket-or-array