January 9^th/ Understanding javascript effects

Unless you’ve been living under a rock for the past couple of years, you’re bound to be familiar with AJAX javascript effects. With the immense popularity of packages like Scriptaculous and moo.fx, designers everywhere have found easy ways to add animation and interactivity to their applications. But how do these effects work? I’ll admit that when I first started delving into javascript, I thought that these effects must be some of the most complicated javascript ever written. It turns out that they’re fairly simple — and that once you understand how they work, you can write your very own effects with ease.

The Basics

The core of all of these effects is a simple sequence of events:

1. The effect function is called on an element (i.e. new Effect.Fade(’myid’))
2. The effect function sets a number of initial styles on the element
3. The effect function then defines an update function that modifies CSS properties of the element in reference to a point from 0 to 1
4. This update function is called repeatedly for a set duration of time passing in the reference point each time
5. A cleanup function is called to re-set some of the original styles, and do the final dirty work.

Defining styles

This step is crucial in any effect. In order for some visual effects to be pulled off, certain CSS properties must be set on the element before anything can happen. The most common styles that are modified during this startup time are the overflow and position properties. This allows us to use CSS properties like width, height, left and top to make the element expand, contract, and disappear out of bounds.

Update function

This function is the most important, and also the simplest part of the javascript effect. It modifies one or more of the element’s CSS properties an incremental amount, in relation to an internal reference point (going from 0 to 1). The easiest example of this is opacity. If we imagine that we are going to repeatedly call this function and pass in the reference value, you could easily change the opacity from 100% to 0% by setting the opacity equal to the reference value multiplied by 100%.

Calling the update function

This is the most interesting part of the javascript effects to me. The update function is called is by setting a timer using setTimeout() every so often (40ms is a good interval to start out with). This update function is called for a set duration of time (500ms, or half a second is a typical duration). While this is going on, an internal reference point (mentioned above) is set to a new value each time the update function is called. The javascript uses a formula to generate this reference value much like this: time spent / total duration = counter.

… except there’s one little catch: linear effects feel very unnatural and robotic to the human eye. This is where I get all geeky about the relation between math and design and how everything ties back into math sooner or later (yes, I’m really that big of a nerd). So - if we can’t use a simple linear timeline, what do we use? It turns out that a Sinusoidal patterns work beautifully. This is the equation that the majority of the effects in Scriptaculous and moo.fx use, but they also offer several others: linear, cubic, circular, flicker, wobble, and pulse.

Here are examples of each of these functions using a simple timeline and colored square (to demonstrate the timeline’s effect on a sample opacity effect) over a 2 second period.

Sinusodial

start sinusodial timeline

Linear

Start linear timeline

Cubic

Start cubic timeline

Circular

Start circular timeline

Flicker

Start flicker

Wobble

Start wobble timeline

Bonus! Start all effects simultaneously

Try mixing up these different timelines in your next javascript effects — it’s a great (and easy!) way to make your app feel just a little different than everything else out there.

Cleanup function

The last part of the process is a very simple step that just cleans up any styles that the effect created that you don’t want lying around. If you happen to set a style in the initialization, it’s usually a good idea to undo that style at the end of the effect.

This is also the time you can apply any finisher properties. For elements that are fading out, or zooming out of view — you’ll probably want to be setting display:none; so they are removed from the layout flow.

Conclusion

Once you get a good grip on how Javascript effects work at their core, you’ll soon realize that they’re not so nasty and complex. The hardest part is the math — and most computer geeks I know are pretty good at math. Play around with trying to create your own effects.

Challenge

If you’d like to challenge yourself, try and use your framework of choice (Prototype, MooTools, YUI, jQuery) and build a javascript effect that moves an element in an elliptical path. Hint: You might try absolutely positioning the element inside of a relatively positioned bounding box.

1. 

   Arpit jacob

   January 9^th | #

   The article was a great read. I am currently work on a Web Application that requires extensive use of JavaScript. I have to write some custom effects from scratch. (I don’t want to make use of any external Libraries) I would most probably have gone with linear effect but your examples were a real eye opener.

2. 

   Thame

   January 9^th | #

   Great article, thanks Kyle.

Name

Email (will not be published)

Website (optional)