JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://labrador.is/media/media/flower.js%20demos/js/tween.min.js"></script>
<script src="http://labrador.is/media/media/flower.js%20demos/js/RequestAnimationFrame.js"></script>
<script src="http://bgrins.github.io/TinyColor/tinycolor.js"></script>

JavaScript

var from = {x: 0, y: {a: 0, b: [{a: 0},0]}, z:[[0,0], 0], color: ["#000000", "#ffffff"], color2: "#dddddd"};
var to = {x: 10, y: {a: 20, b: [{a: 30},40]}, z:[[50,60], 70], color: ["#ffffff", "#000000"], color2: "#cccccc"};

//Flatten or deflate an object
var flatten = function(source,pathArray,result){
    pathArray = (typeof pathArray === 'undefined') ? [] : pathArray;
    result = (typeof result === 'undefined') ? {} : result;
    var key, value, newKey;
    for (var i in source) { 
        if (source.hasOwnProperty(i)) {
            key                 = i;
            value               = source[i];
            pathArray.push(key);
 
            if (typeof value === 'object' && value !== null){
                result          = flatten(value,pathArray,result);
            } else {
                newKey          = pathArray.join('.');
                result[newKey]  = value;
            }
            pathArray.pop();
        }
    }
    return result;
};

function ref(obj, str) {
    return str.split(".").reduce(function(o, x) { return o[x] }, obj);
}

//Move values from a flatten object to its original object
function returnValue(obj, flattened, key) {
    parts = key.split(/\.(?=[^.]+$)/)  // Split "foo.bar.baz" into ["foo.bar", "baz"]
    if (parts.length == 1) {
        obj[parts[0]] = flattened[key];
    } else {
        ref(obj, parts[0])[parts[1]] = flattened[key];
    }
}

//Convert hex to ahsv and save the keys or places
//where the original hex was
function toAhsv(obj, key, color_keys) {
    if (typeof obj[key] == "string") {
        if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(obj[key])) {
            var t = tinycolor(obj[key])
            var hsv = t.toHsv();
            delete obj[key];
            obj[key+".a"] = hsv.a;
            obj[key+".h"] = hsv.h;
            obj[key+".s"] = hsv.s;
            obj[key+".v"] = hsv.v;
            if (color_keys != undefined) color_keys[key] = {};
        }                         
    }
}

var...