In addition to improving the text-splitting process, I created text versions of all but the last two "split" effects. To make up for the two effects I'm leaving out of the text effects, I came up with two new text effects. The first one (which is already pretty much complete) is a simple typewriter effect. It is not as customizable as the others, but is more tailored to achieve expected results. The other will be much more complicated.

After trying unsuccesssfully for about a week to split a block of text into spans of words or letters, I finally followed the KISS rule and made something work. Originally, I was trying to recurse through every non-textNode and split the textNodes inside their parentNodes so any HTML inside the supplied node would remain intact. However, some HTML "features" (and lack of sleep) prevented all my attempts from providing me with what I thought would be a simple, robust, and efficient bit of magic.

Since this is supposed to be the "Midterm Evaluation Period" and "Coding Phase II" starts on Tuesday, I've been taking it easy this past week. However, I haven't completely stopped working on my project; there are two new effects. Nothing to spectacular, just a wipe version of the previous "shear" effect ("pinwheel" was the best name I could think of; suggestions are welcome), and an effect where pieces simply fade out. The demo page is here.

Since my last update, I've made the demo page more verbose and created a "shear" effect that, once again, splits the element into rows and/or columns and slides them in alternating directions, with an optional progressive or random delay between each piece's animation.

With the successful completion of the explode effect, I decided to build on the code used to split the node into pieces. I split the code in half and thus created a new generic function, dojox.fx._split that returns an animation object that splits the node into args.rows and args.columns and applies args.pieceAnimation() to each piece. This function takes the piece, its x and y location in the grid of pieces, and the dojo.coords of the original node as arguments and returns either an animation object or an array of animation objects to be combined.

I created a nice animation effect that splits the element into an arbitrary number of rows and columns, then sends them flying away from the element's center. The user can specify whether or not the pieces fade out as they move, and whether or not the distance and duration of each piece's animation should be randomized.

The effect is accomplished by cloning the node once for each piece and combining each piece's animation together. The original node's opacity is set to zero onPlay.

I've been playing around with the idea of a user-friendly way to make a toggle-able animation, meaning the user creates a single animation object, and when that object is played, the animation either plays forward or backward, depending on the animated node's current position or animation status. If the animation is played while it's already running, it would stop and then play in reverse from the current position.

Wow, it's been two weeks since my last blog. I'll be sure to update this regularly from now on.

I've been experimenting with a method to solve the "stale values" bug in sizeTo but when I realized that the goal of my project is to provide a "toolset," not a bug fix, I decided to forget about trying to solve the bug in dojox.fx and focus on cranking out new animations that handle interruptions and dynamic initial values. Instead of using the defective sizeTo, I'm using animateProperty.

Today is my last day of finals, so after today I'll finally be able to focus on my project. So far, all I've been doing is studying to finish the quarter well, but I have been thinking about how to solve some of the issues associated with reusing animation objects on dynamic elements. I had a brief conversation with my mentor about how to solve the "stale values" issue that surfaces when interrupting an animation. This is especially important for toggling animations. So, tomorrow I plan to sit down and finally get started on playing with a few ideas I have for working out the kinks.

The animation framework in Dojo is very flexible, but because of that flexibility, using it is not a trivial task for the common web programmer. The animation system works well for the JavaScript-savvy, but what if a Dojo beginner wants to add a simple animated effect to an element on the page? What if he wants to make that animation toggle?