Lightweight slider for GSAP Timeline. Clean JavaScript, no external dependencies.

• Start, pause, scrub
• Change target timeline on the fly
• Works in all modern browsers, IE9+

...
<div id="container"></div>
<script src="TimelineMax.js"></script>
<script src="gsap-timeline-slider.js"></script>
<script>
    ...
    var slider = new GSAPTLSlider(timeline, "container", {
        width: 300
    });
</script>
...

See working examples at runbanner.com

Constructor.

• timeline - instance of TimelineLite or TimelineMax
• elementId - id of the slider html element
• config - configuration object with following properties:
  • style - style object for whole container
  • button - style object for play/pause button
  • rail - style object for slider's rail
  • thumb - style object for slider's thumb
  • width - width of the slider
  • timecode - style object for slider's timecode element

Changes container element of the slider.

• element - html element to use for the slider

Changes targeted timeline.

• timeline - instance of TimelineLite or TimelineMax

Changes the width of the slider.

• width - new width of the slider, in pixels

Removes event listeners and cleans the container.

MIT