jCSML – A New Cross Platform Animation Library

With mobile access and tablets, cross-platform media compatibility has become one of the most important features for new web technologies. With Adobe Flash not being supported on iOS and HTML5 not being native to earlier versions of Internet Explorer, the jCS Media Library has arrived just in time.

The developers of jCSML originally created the library to streamline the development of Flash-like web animations in a way that their clientele could access easily. The problem being that the majority of their corporate client base still uses IE 7 and 8 and jQuery does not natively support Z-axis rotation or Opacity animation on .PNG files with the older browsers.

As opposed to other solutions where significant browser-tweaking is required, jCSML provides a structured approach to creating complex animations. Completed animations can be packaged up and incorporated into a website with one line of code with just a few parameters. All developers need is jQuery, the jCSML library, and an understanding of the simple jCSML script structure. Here is an example of the code…

 //Set up your image list.    
var imagelist2 = ['YourImage.png']; 

//The simplest script structure. It is always the same structure for your animations.
//Note: You can have multiple sequences in a single structure by chaining them!
var animseq  = [{CFG:{parent: 'aImage', playing:true},
                SRC:{src:imagelist2, index:0},
                SEQ:[{INI: {top:350, left:-75, angleZ:720, opacity:0}, 
                       NXT: {width:72, height:72, left:400, top:5, angleZ:0, opacity:1},
                        FX: {duration:3000, easing:'swing'}
                     }]
                }];
							
//Create and play our animation sequence.  
var anim = new jCS.mediaObject(animseq);

…and here is the codes demo.

Given that the library doesn’t use Flash, Silverlight, SVG, CSS3 Animations, or HTML5, as it is jQuery-based, jCSML works on all browsers and devices that the developer has tested to date. These include “true” IE7/8 browsers (as opposed to emulators), IE9, Chrome, Firefox 3.6+, Safari, iOS, and Android.

jCSML has a free version that contains all the files you need to get started immediately and is powerful enough for most. The Free version does not have the same functionality as the far more powerful jCSML Elite version that boasts more Anidynamics and event support. The most extensive version includes the functionality of the Elite version, but also includes more examples and over 150 .PNG special effect images and website-ready transition templates.

Useful URLs

jCSML Media Library Homepage →
jCSML Getting Started Guide →
jCSML – How it Works →
jCSML Download Page →