CSSmu javascript library


CSSmu.js allows to create and control timelines in order to animate HTML elements. The goal here is to provide a new way of dealing with it, exploring what remains impossible or tricky to achieve using classical CSS3 animation properties. This small library focuses on building more complex, interactive sequences, still based on CSS declarations.


The current CSSmu.js release is the very first one, and remains experimental on many aspects. I will be upgrading it, and already have a list of future enhancements to make. I would be very glad to hear feedback from people trying it as well ! So please don't hesitate to tell me if you managed to build something awesome out of it, or if you thought about a way of improving it.



Love, auer404
How does it work ?
You design a timeline's action directly in your CSS stylesheets, by defining classes to add to desired elements. These classes specify timeline names and frame data, read by CSSmu in order to create javascript objects that can then be manipulated extensively and easily.

In the end, what happens to your HTML elements is really just some enhanced class juggling, giving them the right aspect at the right time. Just think of the result as that setTimeout / setInterval / addClass / removeClass sequence you've never been insane enough to dare code.

A quick example
Here's a simple HTML structure,

<div id = "container">
<div class = "disc"></div>
</div>

styled this way using CSS,

#container {
position:absolute;
width:80px; height:80px;
left:50%; top:50%; margin-left:-40px; margin-top:-40px;
}

.disc {
position:absolute; background:#006666;
width:40px; height:40px;
margin-left:-20px; margin-top:-20px;
border-radius:50%;
}

to look like this (without the dashed border on the container).


Now the two steps to animate this are as follows :

1. Define some CSS frame aspects after the .disc initial declaration

.disc.custom_move_f1 {top:0%; left:0%}
.disc.custom_move_f2 {top:0%; left:50%}
.disc.custom_move_f3 {top:0%; left:100%}
.disc.custom_move_f4 {top:50%; left:100%}
.disc.custom_move_f5 {top:100%; left:100%}
.disc.custom_move_f6 {top:100%; left:50%}
.disc.custom_move_f7 {top:100%; left:0%}
.disc.custom_move_f8 {top:50%; left:0%}

/* And to keep things smooth : */
.disc {transition:all 0.25s}


2. Create a CSSmu object and play it.

CSSmu({name:"custom_move", rate:2}).play();


And that's it. We've got a simple 8-keyframes animation,
displaying two of them per second.




Of course, at this point, similar results can be obtained with a classic CSS3 animation + @keyframes approach. But using CSSmu.js starts making sense when it comes to tweaking and controlling timelines.

For example, based on the same CSS frame declarations, if we add a opacity:0.5 property to .disc and apply this class to eight elements with ids "disc0" to "disc7", we can do things like this :

// The messy way :

CSSmu({
name:"custom_move", rate:2,
restrictTo:"#disc0"
}).play();

CSSmu({
name:"custom_move", rate:2,
restrictTo:"#disc1"
}).play();

CSSmu({
name:"custom_move", rate:2,
restrictTo:"#disc2"
}).play();

CSSmu({
name:"custom_move", rate:2,
restrictTo:"#disc3"
}).play();

CSSmu({
name:"custom_move", rate:4,
mode:"backwards",
restrictTo:"#disc4"
}).play();

CSSmu({
name:"custom_move", rate:4,
mode:"backwards",
restrictTo:"#disc5"
}).play();

CSSmu({
name:"custom_move", rate:4,
mode:"backwards",
restrictTo:"#disc6"
}).play();

CSSmu({
name:"custom_move", rate:4,
mode:"backwards",
restrictTo:"#disc7"
}).play();
// A smarter way :

var dF_array = [1,3,5,7,8,6,4,2];

for (var i = 0; i <= 7; i++) {

if (i< 4) {
var this_rate = 2;
var this_mode = false;
} else {
var this_rate = 4;
var this_mode = "backwards";
}

CSSmu({
name:"custom_move",
rate:this_rate,
mode:this_mode,
restrictTo:"#disc" + i,
defaultFrame:dF_array[i]
}).play();

}


And obtain this.
(Hover the animation to see how the elements' class attributes shift.)






If you let the above animation run for a certain amount of time and watch it closely, you might notice the clockwise and anti-clockwise motions eventually get out of sync. The way CSSmu (and actually javascript itself) works does not allow 100% accurate time intervals, and we lose a few milliseconds at every frame.

I'm already thinking about a way to fix that in next version with some kind of interval stabilization or a global clock system keeping all timelines "tuned" together.
So, do you think this approach is worth a try ? If it's the case :

• Thank you !
Here's a detailed tutorial to build something a little more complex.