Jump to content

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

Draggable dot for vertical page scrolling, need some help.

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

Share this post

Link to post
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. 

Share this post

Link to post
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. 

Share this post

Link to post
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

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.