Javascript Animate Values as Percentages

Question

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.

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

See this question. You can just put the percentages in quotes, like:

{ 
    position: 0,
        properties: {
            "top" : "10%",
            "width" :  "30%"
        }

 },

edited May 23 '17 at 11:43

Community

1
1

answered May 06 '15 at 16:57

levelonehuman

1,465
14
23

That doesn't really work, for a couple of reasons. It has to be a numeric value to animate between the start and end points. – Ty Morton May 06 '15 at 18:49
Sorry about that, I was thinking that the percent would calculate to a numeric value and then animate up to the higher percent (as a numeric value). In this case, maybe your approach would be best. I'm not sure what else you could do here. – levelonehuman May 06 '15 at 19:38

Javascript Animate Values as Percentages

1 Answers1