Recently, I wanted to create a css3 demo to show flickering of light and after trying it for a couple of times, I was able to build something recognizable. To be honest, it was crap.
I instantly fell in love with the library mo.js. It does everything what I want. I just had to tell it what type of animation I want, and it made the element animate as per that instruction. Simple as that. Legomushroom did an amazing job of creating something so beautiful.
But we all know the problem with using a JS library in a project. UPGRADING THE LIBRARY!!! I have always found it difficult to upgrade the libraries when my project is targeting millions of users. What if the browser that I want to support is not being supported by the library any more? What if a feature that I am using is being depreciated by the library? So many What Ifs!!
I came up with a solution that could let users create
keyframes based on the same concept that mo.js uses, but instead of creating those
keyframes on runtime and performing animations on the fly, the `keyframes are generated on a webapp called SVG2CSS and can be downloaded as css files that can be included in the project.
This exporting of css animation keyframes makes a project independent of any library. Not only that, a user can export the files to gist.github.com which can be shared with anyone. All that a user needs to do is, create the div, and add animation SVG paths and their properties.
Here are some outputs of the demos I added in the project
I created this webapp on top of Polymer JS and hosted it on github pages. All that a user needs to do is create a SVG path for the
property he needs to manipulate, and add the
keyframes generated from this path to a css-class.
I have also explained all the concepts and tutorials related to this SVG2CSS webapp in this link.
In all, I was able to create really complex animations including the ones involving physics in very small time.
If you still find it difficult to use, feel free to reach out to me. If you find any bugs are if you face any problems with the tutorials, feel free to file a bug.