I noticed the use of var elems = new Array(...), instead of using the var myArr = [] literal syntax:

https://github.com/blackberry/Alice/blob/master/js/alice.js#L40

The literal syntax is both more readable and more performant. Constructing an array with new Array( length ) does not do anything to improve the speed of reading from or operating on the array.

All effects should be able to accept its first parameter as a

• string, denoting the Id of an element
• element, denoting an element itself
• string[], denoting a list of element Ids
• element[] elems, denoting a list of elements
• nodeList, denoting a nodeList (important for better integration with frameworks such as dojo, jQuery...)

Hello I need your help when I to implement the code in my html , and to refresh my browser my image disappears, I inspect with the console, and don't show me errors, And I put my cursor on the code in my inspecto's browser, a blue box appears with the effect, this means that the code runs fine but because my image is disappear?

I am trying to include randomness in a slide effect, using the following, however it doesn't appear to be used.

a.slide(elements, "left", 3, { "value": "700ms", "randomness": "75%", "timing" : "ease-in-out", "offset": "100ms" });

Am I just doing it wrong, or is this a bug?

I just found out that Alice.js does not always delete the keyframe rules it creates.
Alice.js uses the "webkitAnimationEnd" event to clear the keyframes rules it created and inserted to the css document. Unfortunately this event isn't fired after every animation completion - at least on my playbook (same story with webkitTransitionEnd event).

To fix this issue I've changed a few lines starting from the line: 234 in alice.cheshire.js so it's using setTimeout insted, like so:
// Add listener to clear animation after it's done
//if ("MozAnimation" in elem.style) {
// elem.addEventListener("animationend", alice.clearAnimation, false);
//}
//else {
// elem.addEventListener(alice.prefixJS + "AnimationEnd", alice.clearAnimation, false);
//}
setTimeout(function () {
alice.clearAnimation2(elem, animId);
}, parseInt(calc.delay) + parseInt(calc.duration));

And in alice.core.js added a method "clearAnimation2":
clearAnimation2: function (elem, animId) {
elem.style[alice.prefixJS + "AnimationName"] = "";
elem.style[alice.prefixJS + "AnimationDelay"] = "";
elem.style[alice.prefixJS + "AnimationDuration"] = "";
elem.style[alice.prefixJS + "AnimationTimingFunction"] = "";
elem.style[alice.prefixJS + "AnimationIterationCount"] = "";
elem.style[alice.prefixJS + "AnimationDirection"] = "";
elem.style[alice.prefixJS + "AnimationPlayState"] = "";

alice.keyframeDelete(animId);

return;

},

After those modifications I have the same number of css rules insertions and deletes.

There is a lot of stuff publicly exposed in Alice that really shouldn't be.
ie:

alice.format
alice.percentage
alice.elems

We should only expose publicly what we expect someone would use.

Throughout the code of Alice, parseFloat() is used with a second parameter, ala parseInt's second parameter, "radix". However, parseFloat() only works in base 10, and therefore does not have a radix parameter.

Since you can't really just slam in any method chaining library and jWorkflow is only 1k minified we should just include it into alice (closured and hidden away) so that chaining animations can always be built into the library

It turns out, at least in the release preview, IE 10 style element is case sensitive. So in the javascript where it is checking for "MSAnimation" this will always fail. But it will find "msAnimation". So if you update this code in alice.core from:
// Internet Explorer 10+
else if ("MSAnimation" in el.style) {
this.prefix = "-ms-";
this.prefixJS = "MS";
}

to:
// Internet Explorer 10+
else if ("msAnimation" in el.style) {
this.prefix = "-ms-";
this.prefixJS = "ms";
}

Alice will then work in IE10 release preview.

However it turns out you do not need the ms prefix for css3 animations to work in IE10 but again it is case sensitive, so where all the style elements are being set, when in IE the first letter must be lower case for example when setting the "AnimationName" it must be "animationName".

Doing this will of coarse break everything when you do need a prefix, so for now it is probably best to keep the ms prefix.

More of the codebase needs to be put under test.

Some thoughts as to how to get this needs to happen (demo page is nice for a smoke test but we need something automated).

Should be fine to test the final css rules applied to the element (as this is repeatable and constant) as what to test.

Point your favorite BlackBerry 7 device to the demo page, it renders way too cramped to be readable.

it does render correctly, though.

Go to Page Flip. Transitions are not visible.

When chaining 2 cheshire events together, only the second one is applied.

Expected results:

1. Rotate an image 90 degrees
2. Then start an infinite 360 rotation every minute, with the rotation starting from that initial 90 deg position.

Actual results:

1. The initial rotation (first cheshire in the following chained code snippet) seems to be ignored.
2. The 360 deg animation always starts from 0 degrees, instead of the rotated 90deg angle I had tried to initially set the object to.

Is the following code how one should be able to do this chaining event? If not, can you specify the correction?

How to reproduce:

var a = alice.init({workflow: true});

a.cheshire({
        "perspectiveOrigin": "bottom",
        "elems": ["orbit"],
        "rotate": 90,
        "overshoot": 0,
        "duration": "0ms",
        "timing": "linear",
        "iteration": "1",
        "direction": "reverse"
    }).delay(0)
        .cheshire({
        "perspectiveOrigin": "bottom",
        "elems": ["orbit"],
        "rotate": 360,
        "overshoot": 0,
        "duration": "60000ms",
        "timing": "linear",
        "delay": {
            "value": "0ms",
            "randomness": "0%"
        },
        "iteration": "infinite",
        "direction": "reverse",
        "playstate": "running"
    }).start();

Allow calling code to be notified automatically when an animation has ended. For continuous animations, wondering if something can be called after each cycle (not sure CSS handles that).

If "end()" is called on an animation, the "onEnd" handler should be called too.

It appears that if a developer has any "import" at the beginning of their stylesheet the the keyframe insert causes an error.

I had some trouble understanding what values & format were accepted for each parameter of the animation methods. I think there is an opportunity to improve the documentation (or code comments / samples) to make this easier for developers who aren't already familiar with the framework

For example: I see the last parameter of the slide() method is playstate, and one code snippet shows that an eligible value is "running". What do either of these mean (what is a playstate)? What are other values besides 'running' that can be used instead? How would a developer know what values to fill in?

Today, there is only one random factor for the entire effect. One should be able to control aspects of an effect independently, so for example, a randomness factor for "duration", and another for "angle" etc...

Current default of "ease" is not as generally esthetic as "ease-in-out".

Created a branch integrated with SauceLabs to test against the major of browsers.

The tests are failing on IE 6, 7 and 8.

go to Fade. The transitions are instantaneous, I can detect no fade.

Current code needs some reorganization as it is confusing where everything lives and the root dirctory is a flood of files that all server different purpuses.

Top level directories should be created to sort files into logical groupings:

src/

All source code (further breakdown should happen in this folder (plugins folder / etc, but will be handled in another task

pkg/

The build output

docs/

All supporting documentation (samples / etc)

tests/

Unit test code.

build/

Any build support code, test runners, test markup, etc.

thirdparty/ or lib/

Third party code (jWorkflow, jasmine, etc) that is needed for building / bundling / etc

/

root dir should really only include the JakeFile, README.md, license information.

Currently we only have 2 files:

https://github.com/blackberry/Alice/blob/master/js/src/alice.core.js
and
https://github.com/blackberry/Alice/blob/master/js/src/alice.plugins.cheshire.js

We should further break these down and reorganize the src folder.

I would expect something like the bounce plugin:
https://github.com/blackberry/Alice/blob/master/js/src/alice.plugins.cheshire.js#L279-310

To be in a file called bounce.js and have it included into the final build result automatically.

This will require changes to building and such to include all the files together in the proper order.

Currently it looks like only x or y axis animations are supported but not both. We need our animation to move diagonally, something like this:

{
  move: {direction: 'custom', from: '0, 0', to: '100px, 100px'}
}

Making calls to two different things to do two different animations, they both complete in the same time.

Go to Wobble page. Try to start wobbling via a tap and then stop wobbling. Both are unreliable. Stopping in particular does not seem to work.

It is hard to contribute patches, new features, etc, without a test suite to catch regressions.

We should be able to view this page on mobile / tablet and desktops and it should scale to fit the viewport.