Timeline thing

Needs some work.

by Admiral Potato

HTML

<script src="https://raw.github.com/AdmiralPotato/npos2d/master/src/vec2.js"></script>
<!DOCTYPE HTML>
<html>
<head>
    <style>
        .dot{
            position: absolute;
            width: 16px;
            height: 16px;
            margin: -8px 0 0 -8px;
            border-radius: 50%;
            background-color: #f00;
        }
        .dot.red{}
        .dot.dark{
            background-color: #f00;
        }
        .dot.darkRed{
            background-color: #f00;
        }
        #filter_data_animation{
            width: 768px;
            height: 768px;
            position: relative;
        }
    </style>
</head>
<body class="data">
<div id="tall_one">
    <div id="filter_data_animation">
        <div class="dot" style="left: 128px; top: 128px"></div>
        <div class="dot" style="left: 192px; top: 192px"></div>
        <div class="dot" style="left: 512px; top: 384px"></div>
        <div class="dot" style="left: 320px; top: 480px"></div>
    </div>
</div>
</body>
</html>

JavaScript

var Timeline = function(args){
    var t = this, requiredType = 'Timeline';
    if(t.type !== requiredType){
        throw 'The ' + requiredType + ' Constructor must be invoked using the `new` keyword.';
    }
    args = args || {};
    t.args = args;
    t.frame = args.frame || 0;
    t.totalFrames = args.totalFrames || 100;
    t.keyframes = args.keyframes || [];
    t.loop = args.loop || false;
    t.calculateTweens();
    return t;
};

Timeline.prototype = {
    type: 'Timeline',//only for constructor checking
    addKeyframe: function(k){this.keyframes.push(k);},
    sortByKeyframeFrameNumber:function(a,b){return a.frame - b.frame;},
    calculateTweens: function(){
        var t = this, i, keyframe, keyframeObjectIdentifierString, propName, animatedProperty;
        t.animatedProperties = {};
        for(i = 0; i < t.keyframes.length; i += 1){ //iterate through keyframes and make sure that all properties something something
            keyframe = t.keyframes[i];
            keyframeObjectIdentifierString = keyframe.target._keyframeTargetIdentifier + '/' + keyframe.property;
            if(!t.animatedProperties.hasOwnProperty(keyframeObjectIdentifierString)){
                //assign the property to be an array, then assign a reference to that array to the animatedProperty var
                animatedProperty = t.animatedProperties[keyframeObjectIdentifierString] = [];
                //I am about to store a work state property on an array to help keep track of work yet to be done
                animatedProperty.hasZeroKeyframeYet = false;
            } else {
                animatedProperty = t.animatedProperties[keyframeObjectIdentifierString];
            }
            animatedProperty.push(keyframe);
            if(animatedProperty.frame === 0){
                animatedProperty.hasZeroKeyframeYet = true;
            }
        }
        for(propName in t.animatedProperties){
            if(t.animatedProperties.hasOwnProperty(propName)){
               ...