Minified ANIMATION

Minified Example - Demonstrates a complex animation.

by tjansen

HTML

<script src="http://minifiedjs.com/download/minified-src.js"></script>
<div id="container">
    <div id="block"></div>
    <button>Click Me</button>
</div>

CSS

#container { position: relative; width: 300px; height: 300px; border: 1px solid black; }
#block { position: absolute; top: 10px; left: 10px; width: 10px; height: 10px; background-color: #000; }
button { position: absolute; height: 100px; width: 200px; left: 50px; top: 100px; }

JavaScript

var MINI = require('minified'); 
var $ = MINI.$, $$ = MINI.$$, EE = MINI.EE;

$(function() {
    $('button').onClick(function() {
        $('button').animate({$$fade: 0});
        $('#block').animate({$top: '200px', $left: '290px'}, 400)
        .then(function(list) {
            return list.animate({$top: '145px', $left: '145px'}, 500);
        })
        .then(function(list) {
            return list.animate({$width: '100px', $height: '100px', 
                                 $top: '100px', $left: '100px',
                                 $backgroundColor: '#f00'}, 2500);
        })
        .then(function(list) {
            return $.wait(500, [list]);
        })
        .then(function(list) {
            return list.animate({$width: '60px', $height: '60px', 
                                 $top: '240px', $left: '0px',
                                 $backgroundColor: '#0f0'}, 400);
        })
        .then(function(list) {
            return list.animate({$width: '30px', $height: '30px', 
                                 $top: '0px', $left: '40px',
                                 $backgroundColor: '#00f'}, 300);
        })
        .then(function(list) {
            return list.animate({$width: '10px', $height: '10px', 
                                 $top: '290px', $left: '250px',
                                 $backgroundColor: '#f0f'}, 300);
        })
        .then(function(list) {
            return list.animate({$width: '10px', $height: '10px', 
                                 $top: '70px', $left: '290px',
                                 $backgroundColor: '#ff0'}, 300);
        })
        .then(function(list) {
            return list.animate({$width: '10px', $height: '10px', 
                                 $top: '10px', $left: '10px',
                                 $backgroundColor: '#000'}, 3000, 1);
        })
        .then(function() {
            $('button').animate({$$fade: 1});
        });
    });
});