Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
igordi

Lightweight slider for GSAP Timeline

Recommended Posts

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

Link to comment
Share on other sites

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

 

Thanks. That was the exact reason to make it.

Link to comment
Share on other sites

  • 1 year later...
  • 2 months later...

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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

Best Regards,

Renard

Link to comment
Share on other sites

  • 4 months later...

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.

Link to comment
Share on other sites

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

Great job and thanks for sharing!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×