Thursday, January 17th, 2008
Facebook releases Animation library
Category: JavaScript, Library
, Social Networks
There is a nice writeup of Animation which includes tweening, easing, and checkpoints.
Some examples include:
HTML:
-
-
<!-- Simple -->
-
-
<!-- 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!
Related Content:
2.4 rating from 31 votes
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!
Yuck.
But I’m sure it works fine. Is it inline only?
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?
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?
They probably just did it inline to keep the examples simple
Now I know why they call it a platform.
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?
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