Jump to content
Search Community

GSJS Slider

jeff4gee 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

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

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

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