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>
<h2>Drag the Knob</h2>
<p>The animation will not resume</p>
<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

body {
    font-family:Helvetica, Arial, sans-serif;
}
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
    
    var kw = $("#pb-scrubber-knob").width();
    var bounds = $("#pb-scrubber-bounds").width() - kw;

    
    function startScrub() {
        
        trackTime = 0;
        

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

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 trackTime = 
                Math.round(dur * ( kpos/bounds));
            var secs = Math.round(trackTime/1000);
            tlScrubberKnob.resume(secs, false);
           ...