JS: CreateLine

CreatLine.js

var
        coordinates = [{
            'x': 149,
            'y': 163
        }, {
            'x': 338,
            'y': 110
        }, {
            'x': 690,
            'y': 47
        }, {
            'x': 933,
            'y': 123
        }, {
            'x': 1243,
            'y': 187
        }];

function createLine(posObj, callback) {
        var
            length = Math.sqrt((posObj['x1'] - posObj['x2']) * (posObj['x1'] - posObj['x2']) + (posObj['y1'] - posObj['y2']) * (posObj['y1'] - posObj['y2'])),
            angle = Math.atan2(posObj['y2'] - posObj['y1'], posObj['x2'] - posObj['x1']) * 180 / Math.PI,
            transform = 'transform: rotate(' + angle + 'deg)',
            lineStyle = "left:" + posObj['x1'] + "px; top: " + posObj['y1'] + "px; transform: rotate(" + angle + "deg);",
            line;

        line = createElement(mainContainer, 'div', {
            'className': 'line',
            'style': lineStyle
        });

        TweenLite.to(line, speed, {
            width: length + 'px',
            onComplete: function() {
                callback();
            }
        });
    }
    
  //Example
  createLine({
            'x1': coordinates[0]['x'],
            'y1': coordinates[0]['y'],
            'x2': coordinates[1]['x'],
            'y2': coordinates[1]['y']
        }, gotoFrameTwo);

style.css

#main-container {
  position: absolute;
  width: 1500px;
  height: 250px;
}

div.line {
  transform-origin: 0 100%;
  position: absolute;
  background-color: #ff6600;
  width: 0;
  height: 2px;
}

This is for drawing lines from one point to another. Much like the Indiana Jones map effect.