Greensock_sample

TweenLite & Draggable

by debrav

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/jQuery.gsap.min.js"></script>
<div id="pb-scrubber">
    <div id="pb-scrubber-bounds">
        <div id="pb-scrubber-fill"></div>
        <div id="pb-scrubber-knob"></div>
    </div>
    <p id="trackTime">0</p>
</div>

CSS

div#pb-scrubber {
    position: relative;
    width: 372px;
    height: 20px;
    float:left;
    text-align: left;
    margin: 16px 0 0 0px;
    background: url("http://vdigitalarts.com/jsf_img/blackBar.png") top left no-repeat;
    background-size: 372px 20px;
}
div#pb-scrubber-bounds {
    position: relative;
    height:15px;
    width:366px;
    top:0;
    left:2px;
}
div#pb-scrubber-fill {
    position: relative;
    width: 0;
    /* 0 to 358px */
    height: 12px;
    margin: 0;
    /* left top */
    background: url("http://vdigitalarts.com/jsf_img/scrubBg.png") 0 4px no-repeat;
    background-size: 367px 12px;
}
div#pb-scrubber-knob {
    position: absolute;
    width: 15px;
    height: 15px;
    top: 2px;
    /* left = 4px to 354px; should always be 4px less than pb-scrubber-fill width */
    left: 0;
    margin: 0;
    /* left top */
    background: url("http://vdigitalarts.com/jsf_img/scrubberKnob.png") top left no-repeat;
    background-size: 15px 15px;
}

#trackTime {
    margin:10px 0 0 10px;
}

JavaScript

var knob_offset = 4;
    var tlScrubberKnob;
    var trackTime = 0;
    var dur = 30000;  // 30 milliseconds
    

    
    function startScrub() {
        
        trackTime = 0;
        var animate_to = $("#pb-scrubber-bounds").width() - knob_offset;

        if (tlScrubberKnob !== undefined) {
            tlScrubberKnob.restart();
        } else {
            tlScrubberKnob = new TweenLite(
                "#pb-scrubber-knob", (dur / 1000), {
                left: animate_to,
                immediateRender: true,
                ease: Linear.easeNone,
                onUpdate: function () {
                    trackTime+= 20;
                   
                    var kpos = $("#pb-scrubber-knob")
                                    .position().left;
                    var bounds = 
                      $('#pb-scrubber-bounds').width() - 
                      ($("#pb-scrubber-knob").width() + 8);
                    
                    $("#pb-scrubber-fill").width(kpos);
                    $("#trackTime").text(
                        Math.round(trackTime));
                    if (trackTime >= dur) {
                        tlScrubberKnob.pause();
                    }
                }
            });
        }
    }

Draggable.create("#pb-scrubber-knob", {
        bounds: $("#pb-scrubber-bounds"),
        type: "x",
        edgeResistance: 1,
        onDragStart: function () {
            this.update();
            tlScrubberKnob.pause();
        },
        onDrag: function () {
            $("#pb-scrubber-fill").width(
                $("#pb-scrubber-knob").position().left + 
                knob_offset);
        },
        onDragEnd: function () {
            var kpos = $('#pb-scrubber-knob')
                        .position().left; 
            var animate_to = $("#pb-scrubber-bounds").width()
                        - knob_offset;

            var trackTime = Math.round(
                                dur * ( kpos/animate_to));
           ...