Facebook is slowly adding features that allow you to do more JavaScript in their world. This started with FBJS (after mock ajax), and today they have announced FBJS/Animation, an open source animation library that not only works inside Facebook, but also can be used stand alone.
There is a nice writeup of Animation which includes tweening, easing, and checkpoints.
Some examples include:
HTML:
-
-
<!-- Simple -->
-
<a href="#" onclick="Animation(this).to('background', '#fff').from('#ffff4b').go(); return false;">Flash</a>
-
-
<!-- Hiding / shrinking -->
-
<a href="#" onclick="Animation(document.getElementById('container')).to('height', '0px').to('opacity', 0).hide().go(); return false;">Hide this div</a>.
-
-
<!-- Revealing -->
-
<a href="#" onclick="Animation(document.getElementById('about')).to('height', 'auto').from('0px').to('width', 'auto').from('0px').to('opacity', 1).from(0).blind().show().go(); return false;">About Facebook</a>.
-
-
<!-- Easing -->
-
<a href="#" onclick="Animation(document.getElementById('container')).to('height', '0px').to('width', '0px').to('opacity', 0).blind().hide().ease(Animation.ease.end).go(); return false;">Hide this div</a>.
-
It is great to see open source libraries like this come out of Facebook. I am curious why they decided not to use one of the other animation libraries out there. If you know, comment below!
Utolsó kommentek