ZIM js JavaScript Framework

Canvas Components, Controls and more!

CSS Animation vs Canvas Animation with #ZIMjs and #CreateJS


CSS and ZIM – example code (not for the same part in the animation)


A ball animating to the middle of the page creating a drop – repeating three times and the drop gets bigger until it turns into a splash with a ring repeating forever.

4559 characters of code in CSS – 1395 characters of code in ZIM.


That is over three times less code with ZIM.  Mind you, file size is more with ZIM as we would need 30K of distilled ZIM code and 100-200K of CreateJS.  Alternatively, we could just use HTML to make the circle with its lovely border-radius hack… and just use TweenJS – the tweening module for CreateJS or various other tween libraries.  This would reduce our code and keep file size down – the best solution for something simple like this.

ZIM  animations have callback functions, they have pausing and unpausing broken down by parts – there is rewinding, we can put them in classes to be dynamically created based on inputs and interaction.  We can connect the animation to the world beyond.  With CSS it is pretty well a static animation – variables in CSS… okay – but why create another programming language?

Overall, this post is really just a prod at CSS – come on… work on that animation interface.  Somehow I doubt it will change – so whatever.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s


This entry was posted on February 12, 2017 by in animation, Comparison, interactive media, javascript and tagged , , , , , , , .


%d bloggers like this: