Lightweight slider for GSAP Timeline

[igordi 8 Likes (Newbie)]

HI all,

 

Here is the free lightweight slider that I made for GSAP Timeline:

https://github.com/igord/gsap-timeline-slider

 

There are no external dependencies and you can change targeted timeline on the fly. I use it at http://runbanner.com/demos/ to allow visitors to preview demo banners.

 

Check it out.

[Carl 11,324 Likes (Superhero)]

Wow, that's very nice! Definitely lighter and a cleaner implementation than using a jQueryUI slider. Thanks so much for sharing. I'll be sure to recommend this to folks.

 

Best,

 

Carl

[igordi 8 Likes (Newbie)]

lighter and a cleaner implementation than using a jQueryUI slider...

 

Thanks. That was the exact reason to make it.

[lvl99 2 Likes (Newbie)]

Great timeline scrubber utility, @igordi. I added an extra timecode feature which helps with tweaking my animation start and end times. Check it out here:

https://github.com/lvl99/gsap-timeline-slider

[rdgAtl 1 Likes (Newbie)]

Greetings,

I would really like to use this light weight slider but I cannot seem to decifer how to set it up. I spent some time on the GitHub page and downloaded the source but I cannot seem to recreate a simple slider with the files that are supplied. Any help is appreciated.

[rdgAtl 1 Likes (Newbie)]

Good morning, any help from a GSAP guru is much appreciated.

[lvl99 2 Likes (Newbie)]

The readme for the slider gives this example block of code to show how to rig it up for use:

<div id="container"></div>
<script src="TimelineMax.js"></script>
<script src="gsap-timeline-slider.js"></script>
<script>
// `timeline` is your TimelineLite/Max instance containing all the necessary tweens
var slider = new GSAPTLSlider(timeline, "container", {
  width: 300
});
</script>

[Carl 11,324 Likes (Superhero)]

hi lvl99,

 

thanks for chiming in.

 

I think it would help a lot of folks just to have a simple downloadable, working file or a CodePen demo.

 

The code above is going to have problems because you can not use TimelineMax.js without TweenLite being present.

Since 99% of folks using TimelineMax will probably be animating CSS properties, its probably best to just load TweenMax.min.js in any demo code so that folks have everything they need. 

[rdgAtl 1 Likes (Newbie)]

Thanks Carl. That was exactly the issue I was having! I tried to get it working but simply could not.

Best Regards,

Renard

[dax006 3 Likes (Newbie)]

worked great first try, thank you!  Now I just need to style it... its a little plain

 

Edit: a pain to edit.  One is better off learning the jquery UI slider.

[retropunk 131 Likes (Specialist)]

This is totally badass. I will be using this the first chance I get!

Great job and thanks for sharing!

[dax006 3 Likes (Newbie)]

appears to break TweenMax.getAllTweens(true);  You have to play() and pause() to get getAllTweens to work.