DIY Javascript Effects Library

April 12, 2007 by aaron

As part of a project I needed an extremely light-weight special effects library that would allow queuing of effects (required), multiple effects, the ability to set a per-effect “framerate”, and enough extensibility to fill any need, but it had to be independent of any Javascript library or OS.

For the “core”: I needed it to be able to queue effects to run one after another, but still be able to run effects synchronously with their own queues. Setting up the effects should take no more than a few lines, and the library should be easy adapted to the website or app it is currently running on. The library must also be cross browser, run well on lower end computers, and very very small (the main reason for creating it was as a replacement in a project for people who didn’t want to use jQuery or Scriptaculous just for the effects.) The core should be able to do everything with only being told the element’s ID, whether we are showing or hiding it (if applicable), and the effect to use. An added “feature” I wanted was something that could be used to create a tutorial, so no features could be used that were too fancy.

For the effects: I needed each individual effect to take no more than a few lines of setup, processing and finishing, so the framework needed to control everything, but each effect should be able to set its own duration using the framerate set. It should also be extremely simple to add new effects to the library.

The results: A library that is only 8KB in size (without compression or comments) or 2.9KB with natural (not gZip) compression and no comments with 4 built-in effects. While I’ll admit that the syntax to call effects isn’t as “pretty” as some of the other libraries, it is very simple, and queuing is powerful and easy to set up. If you want to jump ahead and see the finished product go here

This is just a demonstration post. The actual code will be explained in the future.

To test the effects library click here

The that group of effects was done with the following code:

AOI_eff.start('test_1', {'mode': 'show', 'eff': 'Expand', 'queue': ['hide::test_1::Fade','show::test_2::ScrollLeft::450','hide::test_2::ScrollLeft::50','show::test_1::Fade::25']} );

Something a little more interesting: here or the same thing, but with opposite displays here or the same thing, but the effects depend on the display. here

The onClick commands for those effects are, respectively, as follows.

AOI_eff.start(&#039;test_3&#039;, {&#039;mode&#039;: &#039;show&#039;, &#039;eff&#039;: &#039;Expand&#039;, &#039;delay&#039;: 75, &#039;queue&#039;: [&#039;show::test_4::Fade&#039;,&#039;show::test_5::ScrollLeft&#039;,&#039;show::test_6::SlideUp::50&#039;]} ); AOI_eff.start(&#039;test_5&#039;, {&#039;mode&#039;: &#039;show&#039;, &#039;eff&#039;: &#039;Expand&#039;, &#039;delay&#039;: 75, &#039;queue&#039;: [&#039;show::test_3::Fade&#039;]} );
AOI_eff.start(&#039;test_3&#039;, {&#039;mode&#039;: &#039;hide&#039;, &#039;eff&#039;: &#039;Expand&#039;, &#039;delay&#039;: 75, &#039;queue&#039;: [&#039;hide::test_4::Fade&#039;,&#039;hide::test_5::ScrollLeft&#039;,&#039;hide::test_6::SlideUp::50&#039;]} ); AOI_eff.start(&#039;test_5&#039;, {&#039;mode&#039;: &#039;hide&#039;, &#039;eff&#039;: &#039;Expand&#039;, &#039;delay&#039;: 75, &#039;queue&#039;: [&#039;hide::test_3::Fade&#039;]} );
AOI_eff.start(&#039;test_3&#039;, {&#039;eff&#039;: &#039;Expand&#039;, &#039;delay&#039;: 75, &#039;queue&#039;: [&#039;::test_4::Fade&#039;,&#039;::test_5::ScrollLeft&#039;,&#039;::test_6::SlideUp::50&#039;]} ); AOI_eff.start(&#039;test_5&#039;, {&#039;eff&#039;: &#039;Expand&#039;, &#039;delay&#039;: 75, &#039;queue&#039;: [&#039;::test_3::Fade&#039;]} );

As you can see this is still a work in progress, but I think over time it will improve greatly.

Categorized as: