Javascript Animate Values as Percentages

I have a client project I inherited that uses javascript to create various animation effects while the user scrolls down through the site (sort of like a parallax site).

The problem with it is that it changes the values in pixels, and what we want it do now is user percentages.

For example, this code brings the #location-left div in from the left, by increasing its width from 0 to 750px, when user scrolls down 1800 pixels. It does this over a 200px interval. It achieves this by writing inline CSS into the DIV tag.:

{
                    selector: '#location-left',
                    startAt: 1800,
                    endAt: 2000,
                    onEndAnimate:function( anim ) {},
                    keyframes: [
                        { 
                            position: 0,
                            properties: {
                                "top" : 0,
                                "width" :  0
                            }

                        },
                        {
                            position: 1,
                            properties: {
                                "top" : 0,
                                "width" : 750
                            }
                        }
                    ]
                }

What I want it to do, instead, is go from 0% to 50%. My initial thought was to calculate up a set of var tags:

var a = $(document).width();
var a3= Math.floor(a * 0.3);  // 30% 
var a5= Math.floor(a * 0.5);  // 50%
var a8= Math.floor(a * 0.8);  // 80%
etc.

Before I got too far down that rabbit hole, though, I wanted to see if there was an easier approach that I was just missing.