GSJS Slider

[jeff4gee 7 Likes (Newbie)]

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!

[retropunk 126 Likes (Specialist)]

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!

[jeff4gee 7 Likes (Newbie)]

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.

[Rodrigo 2,662 Likes (Superhero)]

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.

[jeff4gee 7 Likes (Newbie)]

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.