css for javascript generated values

I have an object with an array of values that create animations at specified x,y coordinates. These animations are overlaid onto png images. I'm not sure how to define x,y values for the animations that would work in a resizable page. Currently, when I resize, the png image moves, but the animations stay in the same place.

<script>
// other code

// object example
var Data = {
    max: 1023,
    min: 0,
    data: [
          { x: 635, y: 165, value: parseInt(data.val1) },
          { x: 680, y: 155, value: parseInt(data.val2) },
          { x: 715, y: 160, value: parseInt(data.val3) },
          { x: 750, y: 170, value: parseInt(data.val4) },
          { x: 780, y: 190, value: parseInt(data.val5) },
          { x: 705, y: 420, value: parseInt(data.val6) },
          ]


}

</script>

The docs for the animation generating library don't give any examples other than straight pixel values for the coordinates. Anyone know a work around and how i can apply css to a script?