Login Register

animation

slideTo in a border container

hi. i'm trying to animate a div from a content pane (center region) to another content pane (footer region) in a border container. It appears the slideTo function only supports absolute positioning. Is there a way to determine the position of the footer region dynamically? I'm interested in animating the element to slide and then be positioned behind any children in the footer (e.g., windows taskbar behavior).

ANY help/ideas would be appreciated

Help with animation loop: onEnd function works, animation doesn't

Let me start off by saying that I am a Dojo noob (and rusty on my JS), so this is probably an easy fix that I am overlooking, but I have been searching the forums for the past two day, to no avail.

I am trying to get an array of nodes, take the first node in the array, fade it out, remove the node, and repeat with the next node until all nodes in the array are gone.

At first I tried using this:

while(arr.length > 0){
       myAnim.play()
    }

canceling a chained animation

I have an animation -- a box that flies in, waits a few seconds, and then flies out. I'm accomplishing that by calling the "flyout()" function in the onEnd handler of the "flyin" animation, and putting a delay property on the flyout anim. It's all working perfectly nicely.

Here's the problem: I want to be able to cancel the auto-flyout at any time during the delay (by mousing over the box), but anim2.pause() only works once the second animation has actually started playing, which is too late -- the user may have done the mouseover ages before that....

(Barely) Working Text Effects!

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.

Two New Effects, New Direction

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.

Shear Effect, Verbose Demo Page

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.

Disintegrate Effect

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.

Explode Effect

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.

FisheyeLite Animation doesn't work after changing data

I am workin on a project for the university with fisheyeLite. I make an sortArray to sort an array alphabetically with onclick "abc". It works and sort the array but after that the animation from fisheye doesn't work matter. Can anybody help me? An also problem is that the animation doesnt work on MS Internet Explorer 8. Thanks a lot for your answers.

Code:

{
jdata:"",
templateString: "

" +
"
abc

"+

Intuitive Animation Toolset

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?

Syndicate content