Jump to content
GreenSock

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

GSJS Slider

Recommended Posts

I need to create two elements and I am not sure where to start. First I need to create a slider that can control a TimelineLite animation. Second I need to create a custom scroller for a div box with its content being text. Any help on these two items will be greatly appreciated. 

 

 

 

Thanks for your help!

Link to comment
Share on other sites

check out the Jump Start series here

http://www.greensock.com/jump-start-js/

 

I've learned so much from simply copy and pasting the examples and noodling with the examples.

What you are asking for can be found in different examples on this site.

 

Good luck!

  • Like 1
Link to comment
Share on other sites

check out the Jump Start series here

http://www.greensock.com/jump-start-js/

 

I've learned so much from simply copy and pasting the examples and noodling with the examples.

What you are asking for can be found in different examples on this site.

 

Good luck!

 

Thanks for the reply. I'll check this out.

Link to comment
Share on other sites

Hi Jeff,
 
You mean using something like the JQuery UI slider (source) to control a timeline progress forward and backward?. If that's the case it's very simple, all you have to do is set the minimum and maximum values for the UI slider and associate the slider current value to a timeline progress, something like this:
 

var scrollPos,
progressValue;

$(function() {
        $( "div#scrollMarker" ).slider({
            range: "min",
            value: 0,
            min: 0,
            max: 1000,
            slide: function( event, ui ) {
                scrollPos = ui.value;
                progressTween();
            }
        });
});

function progressTween()
{
    progressValue = (scrollPos / 1000);
    TimeLine.progress(progressValue);
}

There are also a lot of slider codes out there in case you don't want to use JQuery's slider, just google.

 

In terms of your second request I'm not quite sure what is what you want to achieve. Is a custom scrollbar using drag & drop animated with GSAP?, a menu that scrolls through the content of the div using the scrollTo plugin?. A little more info would be great.

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

Thanks for the post. The other item I was looking to building was a div with text in it that I could scroll. I just wanted to custom skin the slider.

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