Canvas Components, Controls and more!
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.