Jump to content
Search Community

Slider w/ scroll bar that locks on slides when dragged

smallio 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

So as mentioned in a previous post, I'm following the advice @OSUblake & have been taking apart projects to try and learn as much as possible. My focus is creating a really nice slider that can be updated and made more complex as I learn. I'm not quite confident enough to make from scratch with GASP,  so I'm using a friends Flickity logic for the slider & slowly converting it over.


See the Pen RQEVyL?editors=0010 by smallio (@smallio) on CodePen


My goals were to learn how to:

1. drag slides & lock with a natural feel ()

2. navigate with touch/swipe & arrow keys ()

3. use mousedown to scale slides down for easy navigation ()

4. use count up to change numerical data on slides ()  ♥ to @Sahil for the crazy example! 

5. drag a horizontal scroll bar at the bottom that locks to each section (×)


I just can't get my head around number 5. I managed to make it work seamlessly with the GASP draggable knob, but I'm really obsessed with learning how to make a horizontal scroll bar correspond with a slider with draggable.


Here's the example I'm trying to recreate (found on the Greensock example page) -



Or a lil' GIF for the busy folks




Searched the forums/codepen/deep space for examples of this & no cigar yet! Has anyone seen any examples of this with GASP that aren't buried in super complex websites?




Link to comment
Share on other sites

@smallio I removed all GSAP libraries from your demo and it still works as it is, so I am not sure how you used draggable on it plus you are not using draggable library in your demo either. Probably you are confusing flickity's draggable with GSAP.


Unfortunately I have never worked with flickity so I can't suggest anything to achieve that effect. Maybe you should try flickity's forum, you will find answers there.


If you want to go pure GSAP then you might be able to use and modify following demo.


See the Pen zpmjLj?editors=1010 by Sahil89 (@Sahil89) on CodePen


  • Like 3
  • Thanks 1
Link to comment
Share on other sites



Sorry for the delayed response, been afk for a few days.


I realised I somehow linked you the wrong pen & have subsequently deleted the most recent one :( ... hence why the draggable wasn't doing anything lol.


I think I confused the situation a lot when explaining it before. I love your example & it's really close to what I'm trying to (I like the little progress bar as well :) ). The thing I really can't understand is how to use draggable to lock onto each slide. The example below shows almost exactly what I'm trying to do. 


For example -

Say there are 10 slides 

You're viewing the 4th slide (the dot is at 40% across the line), and as you drag the dot to the 5th slide it locks to the 50% mark across the line along with the 5th slide now in view.


Does that make sense? :?


Here's it dragging but without it locking to slides:


See the Pen XEjRQV?editors=0110 by smallio (@smallio) on CodePen


I also tried on your example but it makes the line bigger as the progress goes on instead of moving the dot to the right place. 


It divides the grey line at the bottom and each slider fills the percent and locks. Instead of doing that I just want a small circle or square that sits on that line and locks to the slide percentage.


Slide 1 = 0%

Slide 2 = 10%

Slide 3 = 20%




See the Pen oqzWOQ?editors=0100 by smallio (@smallio) on CodePen




Link to comment
Share on other sites

Here is partial demo of how you can achieve it. I have added new code at the end of the previous code so you can see what I have changed. To understand what I have done and how you can further improve this slider to get your complete effect, you must study the previous code. If you want to do custom slider etc things you will have to dive in completely and understand math behind it.


To further update it you will need to redo the same "mapping" for scrubber when you move slides, you will also have to update both scrubber and slider on resize or update certain values like handleWidth etc. So ya there is a lot of going on to achieve this effect and it will be time consuming to do everything, but this demo should give you complete idea.


See the Pen aYBrBm?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 3
  • Thanks 1
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...