FX 2.0: The Full-Featured Animation Framework
July 3, 2009
It has by far been the most popular thing to come out of this blog since its inception, and I am very proud to officially release version 2, and this time I’ve included all the bells and whistles you’ve been asking for! The framework now boasts support for an impressive amount of transitions, CSS multi-unit support (em, %, ex, and all the rest), and many more optimizations for increased performance to get those smooth animations we all want.
How to Use?
Not much has changed in the way of syntax from the previous version. The first argument accepts either the id of the element you wish to animate or the element itself. The second argument specifies the attributes of the animation, by defining the style and an ending value (“to”) and optionally a starting value (“from”) which otherwise defaults to the elements currently computed style:
var fx = new FX(el, { 'font-size': {to: 14}, 'background-color': {from: 'FF0000', to: '0000FF'} });
Additionally, you can optionally specify a duration (defaults to 0.7 seconds) as the third argument, the transition (brand new) as the fourth argument, and finally a callback method and the context you wish to execute the callback in as the fifth and sixth parameters:
var fx = new FX('element', { top: {to: 200}, left: {to: 200}, width: {from: 100, to: 200}, height: {from: 100, to: 200} }, 1.3, 'easeOut', callback, this);
The only method you need to concern yourself with is the start method, which starts the animation and requires no arguments:
var fx = new FX('element', {height: 400}}); fx.start();
That’s it! In just a couple of lines, you have the ability to animate any element any which way you want! What more could you ask for? I’d actually like to know!
CSS Multi-Unit Support
Brand new to the framework, FX now supports multiple CSS units for all scalable styles such as width and height. By defining an optional “units” property for each attribute you can specify which unit to apply to that specific style:
var fx = new FX('box', { width: {to: 20, units: 'em'}, height: {to: 60, units: '%'} });
Any and all CSS units are supported, including; em, pt, %, ex, in, mm, cm, and more. If no unit is specified for the attribute, it defaults to px.
Transitions
A feature promised and often asked for, FX now includes a much greater support for various transitional easing methods. Included in the library are your four basic transitions; linear, easeIn, easeOut, and easeInOut which is defined as an optional fourth parameter of the constructor, defaulting to easeInOut if not provided:
var fx = new FX('component', { opacity: {to: 1}, left: {to: 300, units: 'ex'} }, 1, 'easeIn');
In case that isn’t enough, you can also download the optional transitions pack, which adds an additional 30 transitions to the framework such as; quint, expo, circ, elastic, bounce, and many more!
Optimizations
Version two features over a dozen optimizations designed to improve performance, usability, browser support (still without a trace of browser sniffing), and overall efficiency. For you this means increased speed and a smoother animation.
Demo
To try an illustrative example of all the old features mixed with the new, click here. The example demonstrates multiple tweens against multiple styles using multiple units, and multiple transitions – all of which are randomly generated.
What’s Next?
The framework itself still has many different directions it can go, and I’m sure in time we’ll gain support for any and all features we’ve yet to attain. From here I hope to create additional functionality exclusively related to elements and element control, this including animation queues, delays, and a wealth of helper methods for effects such as fading, sliding, highlighting, motion, morphing, and many more. If you have any suggestions as to what you would like to see in upcoming versions, as always, I welcome your input and look forward to supporting this framework for a long time to come.
I actually think it’s a good idea to add a ’step’ callback, it makes it possible for people to build Accordion widget.
Great work, thank you for this library.
I made some modifications to support fixed styles, which are changed after a given threshold. Let me know if you would like to implement this feature.
Also the property backgroundPosition needs some work…
Overall I would prefer to replace the extra units property with the possibility to parse the raw style into its value and unit on the fly.
Some other ideas: RGBA-support, named colors,…
Does the unit conversion work cross-browser?
@Thimo
Let me see if I can address each of your questions/recommendations one at a time:
1) Fixed styles could be interesting, its not something I have considered before, you can post the code here or email whatever you have at rm.morr@gmail.com and I’ll look it over.
2) The backgroundPosition is something I would never use for animation, and I’m not sure why you ever would? With that said I’ll look it over, thanks for the heads up!
3) I realize jQuery likes to mash together the value and units together for its animation, but the main reason I didn’t go that route is because I wanted to avoid users animating a style from one unit to another (2em to 300px). I don’t consider this good practice, so I decided to restrict it outright.
4) RGBA, and named colors are just a few of the features I’m considering for future versions
5) The unit conversion is absolutely cross-browser and is actually based somewhat on jQuery’s unit conversion. I can’t claimed I’ve tested it in every browser, but so far as I can tell the library, and therefore the unit conversion works in IE6+, FF2+, Opera 9+, Safari 3+, and Chrome 1+
Hello Ryan,
I have written an animation plugin to KSS, based on your library:
http://www.joonis.de/kss-effects-plugin
I made some modifications as mentioned before:
RGBA-support, named colors, backgroundPosition, etc.
Also the unit conversion did not work for IE and all units. I changed this at the expense of size.
Again, thank you for your work.
@Thimo
Nicely done! It’s good to see some developers using FX and expanding upon it! I like the idea of animating to the styles of a className.
As for the unit conversion in FX, which browser/os are you using I’ve tested my demo in IE6, IE7, and IE8 on both vista and XP without issue.
Great work on the plugin! I think I’ll be including some of your ideas in a future version.
In IE document.defaultView is undefined. Therefore it cannot work.
Thimo
@Thimo
That is true, the reason I avoid that specific segment of code in IE is because of the difference between the currentStyle property of IE and the getComputedStyle method of standard compliant browsers.
The getComputedStyle method always returns values in pixels, meaning if you set a div in your CSS to “width: 40%” it will return the pixel value for that. The currentStyle property will return the value as defined in your CSS “40%”. Which means only for those browsers that use the getComputedStyle method that extends from document.defaultView and a from value is defined in the initial call we need to convert it to the pixel value of the from value.
If you run the demo in IE8 and use their DOM inspector you will see that the values are using the correct units.
You are right. The only limitation is, that you are not able to change the initial unit on IE. What you want to prevent anyway…
@Thimo
Thats right, I couldn’t think of a valid use case for starting an element with say a pixel value and then animating it using em? I figure it would be best practice to define the starting value of the element in CSS using the units you will animate the element with.