/**
* Author: isotopic.com.br
* Scroll based animation following a 'keyframed timeline' approach.
* All animation keyframes are stored in a json file.
* Movement is triggered by any continuous input (like scroll, slider, etc).
* In a real use case it'd have a lot more verifications. This is just to show the concept.
*/

// Sample object to be animated
var circle = document.getElementById("circle");
circle.timeline = {};

// Input
var input_field = document.getElementById("input_field");

// Output
var output_field = document.getElementById("output_field");

// In this example, json data comes from the input field
function setTimelineInput(json_data){ 
   circle.timeline = JSON.parse(json_data);
}
setTimelineInput(input_field.value);

// In this example, update is fired by the slider event - usually it'd be triggered by scrolling the page.
function update(range_value){

    // 'ratio' corresponds to the animation state, from 0 (start) to 1 (end).
    var ratio = range_value / 1000;
    var keyframes = [];
    var local_ratio = 0;
    output_field.innerHTML = ratio;
    
    // Loop through all keyframes available for this object
    for(i=0;i<circle.timeline.length-1;i++){

        // When ratio's value is between two keyframes, it must affect the object's properties
        if(ratio >= circle.timeline[i].key && ratio <= circle.timeline[i+1].key){
            keyframes[0] = circle.timeline[i];
            keyframes[1] = circle.timeline[i+1];
        }
        
        if(keyframes.length==2){

            // Normalizes the global ratio to a local ratio (the ratio between two keyframes)
            local_ratio = (ratio - keyframes[0].key) / (keyframes[1].key - keyframes[0].key);
            
            // A little easing
            local_ratio = easeInOutQuad(local_ratio);

            // The calculated position will be the initial position, plus the percent of the possible variation between frames
            x = (keyframes[0].x + local_ratio*(keyframes[1].x -
            keyframes[0].x)); y = (keyframes[0].y + local_ratio*(keyframes[1].y
            - keyframes[0].y));

            // What a mess
            circle.style['-webkit-transform'] = "translate( "+x+"px, "+y+"px)";
            circle.style['-ms-transform']     = "translate( "+x+"px, "+y+"px)";
            circle.style['transform']         = "translate( "+x+"px, "+y+"px)";

        }
        
    }
    
}


//Robert Penner's simplified to just one input
function easeInOutQuad(t) {
    t *= 2;
    if (t < 1) return t*t /2;
    t--;
    return - ( t*(t-2) - 1 ) /2;
}