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.
Problem Statement
Thinking about keyframes and writing down the values of every keyframe is not something human mind can do. This is just too complex. Just imagine, how would you write css keyframes for an animation if you need to manipulate 3-4 properties for a div. Not possible at all, right? In order to achieve this, I had to go with something that doesn’t involve human computation at all. Something that can be computed by a computer. Yup, you are right, I am talking about JavaScript.
Temporary Solution
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!!
Permanent Solution
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
SVG2CSS
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.
See the Pen SVG2CSS dropball demo by Prateek Jadhwani (@prateekjadhwani) on CodePen.
See the Pen SVG2CSS demo by Prateek Jadhwani (@prateekjadhwani) on CodePen.
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.