Ribbon animation code too repetitive
A DRYer version of your code could be:

function prepare(elem, rate, width) {
    var width = 0;
    return function frame() {
        if (width &gt;= 100) return;
        width += rate;
        elem.style.width = width + '%';
        setTimeout(frame, 5);
    }
}

function move() {
    ['ribbon-part-1', 'ribbon-part-2', 'ribbon-part-3', 'ribbon-part-4', 'end-ribbon'].forEach(function(id, i) {
            var el = document.getElementById(id);
            setTimeout(prepare(el, i == 0 ? 1 : 2), i * 300);
    });
}


jsFiddle: https://jsfiddle.net/wLwo0vs6/

I use the ids of the elements to determine how many parts/things that has to move and like that I don't have to hard code stuff. You could also get them from the DOM knowing the starting button that was pressed. This way you could use the exact same code for all the places you have.

But I don't like the animation not being synced properly, the correct for me would be that when one section reached 100% the next section would start the animation. So I suggest a modification that could be done like this:

function prepare(elems, width) {
    var width = 0;
    var elem = elems.shift();
    return function frame() {
        if (width &gt;= 100) {
            elem = elems.shift();
            if (!elem) return;
            width = 0;
        } else {
            width++;
            elem.style.width = width + '%';
        };
        setTimeout(frame, 5);
    }
}

function move() {
    var elements = ['ribbon-part-1', 'ribbon-part-2', 'ribbon-part-3', 'ribbon-part-4', 'end-ribbon'].map(function(id) {
        return document.getElementById(id);
    });
    setTimeout(prepare(elements), 300);
}


jsFiddle: https://jsfiddle.net/db8hbpry/

The missing part is the logic for accelerating. If you know what you want there I can adjust.

More than this, small things could be more pressed, but I think it would reduce readability.