Animate Your Facebook Apps
January 16, 2008
Facebook has officially announced the release of the FBJS Animation Library. The release of this library is Facebook’s response to the difficulties experienced by developers trying to integrate third party animation libraries such as Scriptaculous or Mootools.
The animation library offers a very simple syntax that can generate a wide range of possible effects. After creating an FBJS Animation object, the key functions to remember are to, from, by, hide, show, duration, and go. Here’s how each of these break down.
to: The target style property name/value to transition to during the animation.from: The start style property name/value to transition from during the animation.by: The target delta — or change in — property name/value to transition during the animation.hide: Sets the element’s display style property to “none” after animating.show: Restores the element’s visibility.duration: The duration (in milliseconds) to animate. Setting this overrides the default setting of 1000ms (1 second).go: Processes and renders the animation.
The following example demonstrates how to fade the background of an anchor tag to red (#ff000).
<a href="#" onclick="Animation(this).to('background', '#ff0000').go(); return false;">Highlight Red</a>
The following example demonstrates how to shift a parent DIV element right by 25 pixels.
<div id="container">
<a href="#" onclick="Animation(this.getParentNode()).by('left', '25px').go(); return false;" style="position:relative; left:0px">Shift Right</a>
<div>
The following example demonstrates how to fade out a parent DIV element while rolling the contents up.
<div style="overflow:hidden" id="container">
<img src="http://static.ak.facebook.com/images/wiki_logo.png"/><br/>
</div>
<a href="#" onclick="Animation(document.getElementById('container')).to('height', '0px').to('opacity', 0).hide().go(); return false;">Hide Image</a>
There are also many more advanced functions and implementation techniques to take a look at. For example, the blind function provides smoother hide functionality for some elements. The checkpoint function allows for tiered animations in a single animation call, which can be even further modified with custom callback routines. Using ease better distributes the tween, providing a smoother animation that is quicker near the beginning and slower near the end. Check the FBJS Animation wiki page for full documentation and more in-depth examples.
The official Facebook announcement also revealed the following.
Unsatisfied with the state of 3rd-party animation libraries, we built our own animation library from scratch. We’ve been using this new animation library internally for several months for animations around Facebook, and everyone here has been very happy with it. Now we’re ready to release it to developers on Facebook Platform so you can use it too.
And then we thought: “why stop there?” The library had very little Facebook-specific code, so we took some time to modularize it, and now we’re open-sourcing it for everyone. The code is released under a modified BSD license, which means you’re free to use it pretty much wherever you want.
What this means is that the animation library can even be used outside of Facebook. To get started, simply download the Facebook Animation JavaScript library, include it in your site, and use the same syntax as you would on Facebook.
Comments
Got something to say?
