Jump to content
Search Community

Lightweight slider for GSAP Timeline

igordi test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

  • 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

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

  • 4 months later...

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.
×
×
  • Create New...