Right now, skrollr automatically detects what you want to animate and how to parse. The flow is like this:
- Is it a transform value (scale, etc.)? -> parse transform value
- Is it a color? -> parse color
- Is it a numeric value/multiple numeric values with unit? -> parse them
- It must be a constant value like "block" or "center"
We could probably throw this away completely, because at the end, they are all based on numeric values.
Instead do this:
- Extract all numeric values from the string and remember where they were.
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]
or
rgb(100, 20,40)
will result in something like ["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.