jQuery Forum

I should start by saying i'm quite new to jquery.

I come from a flash background and am trying to update my skills so am creating a masked-growth animation of a tree and have the following so far:http://s46264.gridserver.com/dev/dave/tree_animation/trunk.html

The idea is obvious, i want the tree to grow from the base, branch by branch so the trunk reveals first and then each branch. I'm using divs with hidden overflows and am animating the width and height properties to reveal each segment.

I had a bit of trouble figuring out how to animate width from right to left as opposed to left to right so am using containers floated to the right for both left-hand branches to reverse the animation direction (not sure if this is best practice but was the best I could do?)

The next step is the leaves (i've had these fade in at the end so you can see what they look like).

My idea is to separate all the leaves into pngs and position them in the correct place, then i want to reveal each of them individually from specific points of origin (the root of each leaf which appears in different places) and reveal each leaf by animating the height/width in the opposite direction.

So a few questions:

1. What's the best way to do masked reveals of objects while being able to control the reveal direction i.e. left-to-right, top-to-bottom, bottom left-to-top right etc?

2. Am i doing this the right way?

3. Is there a better way to do this?

4. Should i be using jquery or would html5 canvas be better?

5. Is there a less convoluted way to achieve what i'm looking for? The whole absence of masking and being able to control animation directions without floating things seems backwards to me.

This would all obviously be very simple on flash timeline but i don't seem to have the same tools available in jquery? Am i missing something and how would you do this?

Thanks for taking the time to read. Very determined to do this in standards-based tools!