Jump to content
GreenSock

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

Draggable knob and scroll area

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 all,

In the codepen example that is provided, the knob and the scroll-bar are linked, which is what I want to accomplish for my project.
The content area is also draggable by mouse, which I want to strip out of the code, but I can't seem to make it work..

In summary: i want the knob to link to the scrollbar of my page.. that's it. (So if the knob is fully rotated, the scrollbar is at the bottom of the page etc.).

I would appreciate any help. Thanks in advance!

 

See the Pen gnoDc by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

I stripped a bunch out of that demo and took a different approach.

I created a paused tween that scrolls the content div to its maxScroll position like so:

 

var scrollTween = TweenMax.to(content, 5, {scrollTo:maxScroll, paused:true});

 

I then used the onDrag property of the knob's Draggable to update the progress of that tween:

Draggable.create(knob, {
  type:"rotation",
  bounds:{minRotation:0, maxRotation:360},
  onDrag: function() {
    //use current rotation (a value between 0 and 360) to generate a value between 0 and 1 to pass to the progress of the scrollTween
    var progress = normalize(this.rotation, 0, 360);
    console.log("progress = ", progress);
    scrollTween.progress(progress);
  }
});
//returns a value between 0 and 1
//normalize(180, 0, 360) // returns 0.5
function normalize(value, min, max) {
  return (value - min) / (max - min);
}

 

 

See the Pen yoPrNm?editors=1010 by GreenSock (@GreenSock) on CodePen

 ***note: that demo loads GSAP's ScrollToPlugin from: https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/ScrollToPlugin.min.js

 

 

If you need a great study on scroll positions, normalize and clamp check out @OSUblake demos here: https://greensock.com/forums/topic/16514-continuously-tween-on-click-taphold/?do=findComment&comment=73118

 

  • Like 4
Link to comment
Share on other sites

Hi Carl,

Thanks for your great reply, I could actually make it work which I want to thank you for.
My only problem is, my scrollbar doesn't work right with this solution. I want to have both possibilities, using the scrollbar aswell as using the knob to scroll.

Is there a way to make this work?

Thanks.

Link to comment
Share on other sites

Oh, sorry, I misunderstood what you needed, I thought you just wanted the knob to control scrolling.

 

When you scroll the div, do you want the knob to spin also?

 

If so, the tween-method I suggested goes out the window. There will need to be a bit more wiring between the scrollbar and the knob (as in the original demo). I'd suggest looking into the demos Blake provided in the link above and see if you can get a scrollbar on a div to generate a value between 0-360. You can then use that number to update the knob.

Link to comment
Share on other sites

Thanks again for your reply Carl, really appreciate it!

When I scroll the div, I also want the knob to spin yes.


I tried looking into the demos that Blake provided (which are great btw!), but with no succes thus far.. I think it's getting too technical for me right now.

If there's anyone who would like to assist me further, (maybe for a small fee) I would appreciate it alot!

Thanks in advance!

Link to comment
Share on other sites

this might do the trick:

 

See the Pen MvGeBO?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Most of this came from the guts of demos and posts from Blake.

 

 

watch the videos here:

 

  • Like 4
Link to comment
Share on other sites

Thanks! I made it work. I really appreciate it. I have on last question, is there a way to link the button to the <body> element of my page?
When I do that, I get an error noting: "Uncaught TypeError: Cannot read property 'scrollHeight' of null".

I appreciate your help!

Link to comment
Share on other sites

No, Draggable wasn't really meant to scroll the entire body, but you could certainly just drop a wrapper <div> in the body and use that instead. 

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