Find file
Fetching contributors…
Cannot retrieve contributors at this time
155 lines (118 sloc) 11.1 KB
Copyright 2011 Research In Motion Limited.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
See the License for the specific language governing permissions and
limitations under the License.
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link href="favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="default.css">
<style type="text/css">
<a href=""><img style="position: absolute; top: 0; right: 0; border: 0;" src="" alt="Fork me on GitHub"></a>
<div class="fineprint"><p id="version"></p></div>
<div id="container">
<div id="card1" class="card-edge">
<div style="text-align: center;">
<a href="demos.html" class="big button">View Demos</a>
<p><b>Alice.js</b> - <i>(A Lightweight Independent CSS Engine)</i> is a micro JavaScript library focused on using hardware-accelerated capabilities (in particular CSS3 features) in modern browsers for generating high-quality, high-end visual effects.</p>
<p>Created by Laurent Hasson (<a href="">@ldhasson</a>, lhasson at rim dot com), and co-developed with Jim Ing (<a href="">@jim_ing</a>, jing at rim dot com)</p>
<p>While working on a simple game written in HTML5, I wanted to use a "flip3D" effect. That effect had become popular since CSS3 was introduced and performed well due to hardware-acceleration in most mobile browsers. I thought there would be a simple library to do the job, but all I found was samples of varying quality with tons of CSS and HTML markup that were not very cross-platform. Even more important, as I researched more options, I was surprised to see that in the many years since CSS3 appeared, we hadn't gone beyond Flip, Fade, Slide and Zoom. When compared to other major development environments where rich visual libraries are the norm, I lamented the apparent lack of progress in the HTML world.</p>
<p>So I decided to explore the ability to package such animations in a very lightweight library that would set-up all the CSS and manage my base HTML for me, and keep my page clean of "effects logic". Alice.js was born. I had no idea where this could lead and I literally felt like the real Alice following the white rabbit down a scary hole. Very quickly, it became clear that lots of cool things could be done that would not just be fancy animations, but which could actually make a general UI better, and help with games too. This is an area that Research In Motion (RIM) is particularly interested in, pushing boundaries in graphically rich Web applications to create more compelling experiences.</p>
<p>We are experimenting with many UI components, with tying in sensors, adding physics, and even organics. This is perhaps one of the more exciting feature of Alice.js. The human eye is very good at spotting differences in movement. Something so subtle as a millisecond difference can be perceived. Achieving natural/organic randomness is at the heart of most high-end visual effects in Hollywood blockbuster films. The beauty is that we don't need to reach that level of sophistication to give an effect some variability so that during the lifetime of the application, things don't feel repetitive. Varying just slightly the speed, perspective, and over-rotation on a flip effect adds a degree of subtle "freshness" every time it comes up.</p>
<a href="demos.html" class="big button">View Demos</a>
<p>The demos are separated in two sections. Bounce, Toss, Wobble, Spring, Fade, Rotate are all working and fairly stable effects. They should be usable in an application although of course the library is still in early alpha stages. The second section features effects such as Carousel, Cube, Page Flip, Fold, Flip, and Flip2 that are in themselves more experimental and contain several known bugs.</p>
<pre class="prettyprint lang-html linenums">
&lt;div id=&quot;DIV1&quot;&gt;HERE IS ONE DIV&lt;/div&gt;
&lt;img id=&quot;IMG1&quot; src=&quot;/myimg.gif&quot;&gt;
&lt;script src=&quot;/alice/alice.core.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/alice/alice.wobble.js&quot;&gt;&lt;/script&gt;
alice.wobble([&quot;DIV1&quot;, &quot;IMG1&quot;], 20, 5, &quot;top-left&quot;, 1000, 10, &quot;ease-in-out&quot;, -1);
<p>In here, we apply the Wobble effect to a DIV and an IMG. Alice.js doesn't touch the contents of the DIVs and respects whatever styling you set &mdash; it's up to you to do whatever fits your application goals. The parameters are:</p>
<li>The rotation angle in degrees (here 20).</li>
<li>The amount of randomness in % applied to the rotation. So in reality, rotation will be between 19 and 21 (+/- 5%).</li>
<li>The anchor point, which can be "top-left", "top-center", "top-right", "center" etc... as well as explicit coordinates in % of the DIV's entire size, like [200, 200].</li>
<li>The duration of the effect in ms (here 1000).</li>
<li>The amount of randomness in % applied to the duration. So in reality, duration will be between 900 and 1100 (+/- 10%).</li>
<li>The easing function as per standard CSS specs.</li>
<li>The number of iterations, with -1 denoting infinite.</li>
<p>Alice.js is completely self-contained and doesn't rely on any other libraries. It also focuses exclusively on setting up animations through CSS manipulations. This makes it easy to include along with other libraries without fear of collision as Alice.js doesn't try to do event handling (touch or mouse), nor does it enforce particular logic or layout elements. It's easy for instance to use Alice.js to animate a Dojo Dialog component for example, or a jQuery UI component, just by addressing the underlying DIV.</p>
<p>Alice.js is composed exclusively of JS files in a single folder, without image, CSS or any other dependencies. There is an "alice.core.js" file that contains common code and utilities, and then each effect has its own additional JS file, for example, "alice.wobble.js". The goal is to keep each animation separate which makes it easy for a developer to create a minified build with only what is needed and nothing else. Alice.js is lean and right now, the gzipped minified version containing the entire library is about 5K only!</p>
<p>The syntax for Alice.js is also kept minimal and in line with CSS, which we believe to be really simple and easy to grasp. For example:</p>
<pre class="prettyprint lang-js linenums">
alice.wobble("MyDiv", 20, 5, "top-left", 1000, 10, "ease-in-out", -1);
<p>This can be thought of as:</p>
<pre class="prettyprint language-css linenums">
#MyDiv {
animate-wobble: 20 5% top-left 1000ms 10% ease-in-out infinite;
<p>Or more detailed:</p>
<pre class="prettyprint language-css linenums">
#MyDiv {
animate-wobble-rotation: 20;
animate-wobble-rotation-ramdomness: 5%;
animate-wobble-anchor: top-left;
animate-wobble-duration: 1000ms;
animate-wobble-duration-randomness: 10%;
animate-wobble-duration-timing-function: ease-in-out;
animate-wobble-iteration: infinite;
<p>The preceding CSS code is just mock code to illustrate how to think about Alice.js. All effects are modeled around the same approach where a single line of JavaScript is sufficient to set-up an effect. Ultimately, we would like CSS to adopt higher-level animation constructs to make it real easy to add more evolved visual special effects to Web applications.</p>
<p>Finally, although we focus primarily on hardware-accelerated CSS at this point, we don't want to rule out using other technologies in the future such as Canvas and WebGL. And although the library focuses really on visual effects, we are exploring ways to tie in sensor input to make things more interesting, without interfering with application logic, or bringing in too much baggage.</p>
<p>The library is intended to work at least on Chrome (V13 or V14-beta because of hardware-acceleration requirements), iOS, and BlackBerry platforms. As the library evolves and more people participate, it's our goal to support all major platforms the best way we can.</p>
<a href="" class="big button">ZIP</a>
<a href="" class="big button">TAR</a>
<p>Alice.js is distributed under the Apache 2.0 license and is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.</p>
<div class="spacer"></div>
<div class="fineprint"><p>Copyright (c) 2011 Research In Motion Limited. &bull; <a href="license.txt">License</a> &bull; <a href="credits.html">Credits</a></p></div>
<!-- Syntax Highlighting -->
<link rel="stylesheet" type="text/css" href="lib/prettify/themes/sons-of-obsidian.css">
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
<script type="text/javascript" src="lib/prettify/lang-css.js"></script>
<!-- Feature Sniffer -->
<script type="text/javascript" src="lib/sniffer.js"></script>
<!-- Alice.js -->
<script src="js/src/alice.core.js"></script>
<script type="text/javascript">
document.getElementById('version').innerHTML = 'Version ' + alice.version + ' (Build: ' + + ')';