Thursday, January 17th, 2008

Facebook releases Animation library

Category: JavaScript, Library, Social Networks

<>p>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:

  1. <!-- Simple -->
  2. <a href="#" onclick="Animation(this).to('background', '#fff').from('#ffff4b').go(); return false;">Flash</a>
  3.  
  4. <!-- Hiding / shrinking -->
  5. <a href="#" onclick="Animation(document.getElementById('container')).to('height', '0px').to('opacity', 0).hide().go(); return false;">Hide this div</a>.
  6.  
  7. <!-- Revealing -->
  8. <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>.
  9.  
  10. <!-- Easing -->
  11. <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!

Related Content:

Posted by Dion Almaer at 9:00 am
8 Comments

++---
2.5 rating from 37 votes

8 Comments »

Comments feed TrackBack URI

Well I took a quick look at the code and it looks to be pretty straight forward and written in a clear style. It’s good to see a high profile web presence sharing more of its resources like this.

Vive la Web!

Comment by wc1970 — January 17, 2008

Yuck.

But I’m sure it works fine. Is it inline only?

Comment by emehrkay — January 17, 2008

I’d love to know why they rolled their own library as well. Are their FB specific animation apis that abstract the usage a bit?

Comment by Brad Harris — January 17, 2008

That’s neat that Facebook has an animation library, but really, these are horrible examples to sport from Facebook. Is this how they’re recommending people use it?

Comment by ded — January 17, 2008

They probably just did it inline to keep the examples simple

Comment by RobRobRob — January 17, 2008

Now I know why they call it a platform.

Comment by Jordan — January 18, 2008

Jordan is right – Facebook IS a platform. They are constantly creating new APIs and updating existing ones. Now they are adding effects to the mix with this animation framework of theirs. Its great for FBML developers but I dont expect to see it out in the wild.

I think its a great idea by FB to create this – it will make the interface in FB even better. Now, where can I hide every stupid application?

Comment by Bryan — January 18, 2008

The semantics that I see in their examples don’t appeal to me all that much.
 
The UIZE JavaScript Framework provides one primary method through which arbitrary numbers of CSS style properties can be animated…
 
fadeOBJ = Uize.Fx.fadeStyle (
   nodeSTRorOBJ,
   startStylePropertiesOBJ,
   endStylePropertiesOBJ,
   durationINT
);
 
// fade from thin border/thick padding to thick border/thin padding over 1/4 second
Uize.Fx.fadeStyle (‘myNode’,{borderWidth:1,padding:20},{borderWidth:20,padding:1},250);
 
// fade from current colors to white text on black background over two seconds
Uize.Fx.fadeStyle (‘myNode’,null,{color:’#fff’,backgroundColor:’#000′},2000);
 
// fade font size from 30px back to current size over a half second
Uize.Fx.fadeStyle (‘myNode’,{fontSize:30},null,500);
 
…excerpted from…
 
http://www.uize.com/reference/Uize.Fx.html

Comment by uize — April 6, 2009

Leave a comment

You must be logged in to post a comment.