Jump to content


Draggable dot for vertical page scrolling, need some help.

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

Hi, i'm trying to make alternative drag gable navigation element , that would scroll the page by dragging it up and down. So i have ran into 2 problems one is the moment you start to drag it jumps to the bounds top/bottom bounds of y axis instantly. Secondly i wan't to animate it,  when you scroll the page normally, but that that brakes brakes everything also. Any help/tricks/tips with this would be greatly appreciated.

See the Pen xxxVQmJ by Intikas (@Intikas) on CodePen

Link to comment
Share on other sites

Hey evomedia and thanks for being a Shockingly Green member! 


It doesn't help us helping you if you always are updating the same CodePen that you posted in the first link. It would be good to save different version so that we can see your first attempt followed by any changes that you make.


In general, I would structure my approach as such:

  • Set up a tween to linearly scroll to the end of the page. Keep it paused.
  • On the range slider's change event, calculate the percentage of the range in the 0-1 range and pass that value into your scroll tween's .progress().
  • On scroll, update the range slider's position but don't update the page's scroll position inside of the listener (that way you keep the page's default scroll behavior).

That way you keep the range slider and page scroll behavior in agreement but independent. 

Link to comment
Share on other sites

Oh, my bad. Though that I was messing around with the forked one :) . It behaves like it should if i change the progress with  onDragEnd or onRelease listeners. It just really doesn't like it when i try to use onDrag. 

Link to comment
Share on other sites

I recommend using a regular input element with type="range" for this.  You don't even need GSAP, really :) 


See the Pen oNNxOxR?editors=0100 by GreenSock (@GreenSock) on CodePen


If you need more control over the styling (stying default input elements across browsers can require a lot of testing/workarounds) then you could create a dummy version using divs like you did and hide the input. But this approach avoids the issue you describe above.


Edit: Looks like Blake beat me by half a second :D 

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

Thank you both, I'll try doing it with inputs :) 

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.