Is there a way to send a Div Attribute pointer rather than its value to Object

Question

To create an animationque I have created an Object which holds the required details as well as all animation points in an array.

module.exports = function calcAnims(start,div,dimension,dimStart,dimStop,duration,FPS){
this.div = div;
this.start = start;
this.dimension = dimension;
this.FPS = FPS;
this.tweenArr = [];
if(dimStart > dimStop){
    var dimDiff = dimStart - dimStop;
    var totalFrames = duration/FPS;
    var incPF =  dimDiff / totalFrames;
    for(var i=0; i<totalFrames;i++){
        this.tweenArr.push(((totalFrames - i)*incPF)+dimStop);
    }
}
if(dimStart < dimStop){
    var dimDiff = dimStop - dimStart;
    var totalFrames = duration/FPS;
    var incPF =  dimDiff / totalFrames;
    for(var i=0; i<totalFrames;i++){
        this.tweenArr.push((i)*incPF+dimStart);
    }
}
}

These objects go into an object array

var animationQue = [];
animationQue[0] = new calcAnimsJS(3000,bars[3].newDiv,"width",getDivDim(bars[3].newDiv,"width"),0,7500,16.667);
animationQue[1] = new calcAnimsJS(10500,bars[2].newDiv,"width",getDivDim(bars[2].newDiv,"width"),0,7500,16.667);
animationQue[2] = new calcAnimsJS(18000,bars[1].newDiv,"width",getDivDim(bars[1].newDiv,"width"),0,7500,16.667);
animationQue[3] = new calcAnimsJS(25500,bars[0].newDiv,"width",getDivDim(bars[0].newDiv,"width"),0,7500,16.667);

I then iterate through this array in my animationloop

if(animationQue[i].start<progress){
    if(this.dimension == "width"){
        animationQue[i].div.style.width = animationQue[i].tweenArr[0] + "px";
        animationQue[i].tweenArr.shift();
        animationQue[i].start = animationQue[i].start + animationQue[i].FPS;
    }
}

Is there any way i can pass something like div.style.width to this object to then use as a reference when its animation time? It would be much more economic than having to write an if then statement that checks if the string is "Width" inside my animationloop.

Answer 1

So Yey to me for answering my own question! :) Ideally the dimensions would go into their own module, but ill work on that later.

My object that i posted at the top now looks like this.

module.exports = function calcAnims(start,div,dimension,dimStart,dimStop,duration,FPS){
this.div = div;
this.start = start;
this.dimension = dimension;
this.FPS = FPS;
this.tweenArr = [];
if(dimStart > dimStop){
    var dimDiff = dimStart - dimStop;
    var totalFrames = duration/FPS;
    var incPF =  dimDiff / totalFrames;
    for(var i=0; i<totalFrames;i++){
        this.tweenArr.push(((totalFrames - i)*incPF)+dimStop);
    }
}
if(dimStart < dimStop){
    var dimDiff = dimStop - dimStart;
    var totalFrames = duration/FPS;
    var incPF =  dimDiff / totalFrames;
    for(var i=0; i<totalFrames;i++){
        this.tweenArr.push((i)*incPF+dimStart);
    }
}

switch(dimension){
    case "width":
        this.callBackAnim = function(div, value){
            div.style.width = value + "px";
        }
    break;
    case "height":
        this.callBackAnim = function(div, value){
            div.style.height = value + "px";
        }
    break;
    case "left":
        this.callBackAnim = function(div, value){
            div.style.left = value + "px";
        }
    break;
    case "top":
        this.callBackAnim = function(div, value){
            div.style.top = value + "px";
        }
    break;
    case "inner":
        this.callBackAnim = function(div, value){
            div.innerHTML = value;
        }
    break;      
    default:
        alert("no valid animation passed on");

}
}

So depending on what dimension string is passed to the object when it is being first created a different function will be attached to the callBackAnim variable. The way the object is crated is still exactly the same. But then when the animations are executed the callBackAnim is executed. Im not sure, but i dont think this quite qualifies as a callback function though. So this is what i have in my animation loop.

  for(var i=0;i<animationQue.length;i++){
    if(animationQue[i].start<progress){
    animationQue[i].callBackAnim(animationQue[i].div, animationQue[i].tweenArr[0]);
    animationQue[i].tweenArr.shift();
    animationQue[i].start = animationQue[i].start + animationQue[i].FPS;
    }
  }