You can clone with
Right now, skrollr automatically detects what you want to animate and how to parse. The flow is like this:
We could probably throw this away completely, because at the end, they are all based on numeric values.
Instead do this:
That's it. No matter if the string is rotate(0deg) scale(1.2) or rgb(100,20,40) or just 10px or even block, we will just parse all of them in a simple structure using a regex. For example
rotate(0deg) scale(1.2) will result in something like ["rotate(?deg) scale(?)", 0, 1.2]
["rotate(?deg) scale(?)", 0, 1.2]
rgb(100, 20,40) will result in something like ["rgb(?, ?,?)", 100, 20, 40]
["rgb(?, ?,?)", 100, 20, 40]
Without looking at the code, this will probably save 20% or even more of the current code.
It get's even better: With this change, we will get support for all kinds of properties which would be hard to handle, for example gradients or shorthand values like "background", where position, image and color are mixed.
The only thing we need to keep in mind is, that there are some CSS properties that don't support floats and need <integer> CSS value. All properties in this table with either <integer> or <color> need special handling.
It took me 20 minutes to implement (yeah, I wrote this issue text before and just opened it) and it cut the minified version almost 2k! It's now 5.6k, but without <integer> handling. So almost everything works, except for example rgba colors using the integer notation instead of percentage. But I'm confident that those cases can be handled without giving away the 2k saving completely ;-)
One thing I forgot: mapping hsl to hex for IE is missing too, so let's see how much code this takes.