gsap-timeline-slider

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+

Example

...
<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

API

new GSAPTLSlider(timeline, elmentId, config);

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 sliders rail
  • thumb - tyle object for sliders thumb
  • width - width of the slider

slider.container(element)

Changes container element of the slider.

• element - html element to use for the slider

slider.timeline(timeline)

Changes targeted timeline.

• timeline - instance of TimelineLite or TimelineMax

slider.width(width)

Changes the width of the slider.

• width - new width of the slider, in pixels

slider.clear()

Removes event listeners and cleans the container.

License

MIT