Draggable/Scrolling div - How to create an anchor tag/auto scroll

[goral]

Hey guys, ive a div that has scroller functionality with the Draggable plugin. Im creating a menu with buttons to autoScroll the scrollable/draggable area. How does one animate the scroller area on a button click?

Ive tried:

TweenLite.to([Draggable.get("#content")], 1, {y:50});

TweenLite.to([Draggable.get("#content")], 1, {scrollTo:{y:50}});

TweenLite.to(content, 0, {scrollTo:{y:100}});

TweenLite.to(content, 1, {y:50});  <------This animates the whole scrollable area, I just want to animate the content

 

Any help would be greatly appreciated! Go greenSock team! Using the GSAP platform sure beats CSS animation!!

[Rodrigo]

Hi,

 

Perhaps you could give this a look:

 

See the Pen xiAnD by rhernando (@rhernando) on CodePen.

 

As you can see is a very simple example of how you can use the scrollTo Plugin with Draggable. Please feel free to fork it and adapt it to your scenario.

 

Anyway what I think could be the problem is that you're pointing the scrollTo plugin to the content element and not the parent, remember that the parent element is the one with the overflow property, not the content. Also to make it more consistent the Draggable instance's type should be "scrollTop", like that both GSAP instances (scrollTo plugin and Draggable) will work on teh same element and the same property.

 

Rodrigo.

[goral]

Hi,

 

Perhaps you could give this a look:

 

See the Pen xiAnD by rhernando (@rhernando) on CodePen.

 

As you can see is a very simple example of how you can use the scrollTo Plugin with Draggable. Please feel free to fork it and adapt it to your scenario.

 

Anyway what I think could be the problem is that you're pointing the scrollTo plugin to the content element and not the parent, remember that the parent element is the one with the overflow property, not the content. Also to make it more consistent the Draggable instance's type should be "scrollTop", like that both GSAP instances (scrollTo plugin and Draggable) will work on teh same element and the same property.

 

Rodrigo.

Thanks! Thats exactly what im looking for

[goral]

I still cant get it to work, Ive attached my files...

 

PS: the problem lies with the rotating knob functionality, it should scroll the content div notice line 105

Archive.zip

[Rodrigo]

Hi,

 

The first issue is that you weren't including the ScrollTo plugin, you just to add it like any other script tag:

<script type="text/javascript" src="js/plugins/ScrollToPlugin.min.js"></script>

The second issue was adding this line to the Drag event:

TweenMax.to(content, 0, {scrollTo:{y:"+10"}});

Sure is very logical to state:"on every drag event add 10px to the current scrollTop position", but the problem is the direction of the drag, if you reduce the angle i theory the element should scroll up, but instead it'll keep scrolling down. The best way is to create a paused TweenLite instance that scrolls the parent element to the bottom and update this instance's progress value when you drag the knob. Fortunately Jack added a string in the ScrollTo plugin, "max", that automatically scrolls the element to the bottom position, saving us the code to calculate how much you should scroll. So your code should be like this:

var content = document.getElementById("content");

var contentTween = TweenLite.to(content, 1,{scrollTo:{y:'max'}, paused:true, ease:Linear.easeNone});

Draggable.create("#knob", {
    type:"rotation",
    throwProps:true,
    bounds:{minRotation:0, maxRotation:360},
    onDrag: function() {
        console.log("hit");
        contentTween.progress(this.rotation / 360);
  	},
});

Progress is a value between 0 and 1 that you can use to get or set the current position of the instance being referenced, take a look at it:

 

http://api.greensock.com/js/com/greensock/core/Animation.html#progress()

 

Also what you should consider is that if you set a "scrollTop" Draggable instance on the same element you created a Tween instance using the ScrollTo plugin, the Draggable instance will cause the overwrite manager to kill the ScrollTo plugin instance, so you'll have to add the autoKill boolean in the scrollTo vars, like this:

var contentTween = TweenLite.to(content, 1,{scrollTo:{y:'max', autoKill:false}, paused:true, ease:Linear.easeNone});

I've created a codepen so you can see it working:

See the Pen sCgrE by rhernando (@rhernando) on CodePen.

 

Rodrigo.

[GreenSock]

There were a few problems with your file, so I just created a codepen that demonstrates what I think you were going for:

http://codepen.io/GreenSock/pen/gnoDc

 

I also went ahead and made sure that mousewheel activity would update the knob, and I enabled overscrolling

 

Does that help? 

[GreenSock]

I noticed you had little notches in the knob, so just updated the codepen to implement snapping so that when you spin the knob or drag the content, it'll snap to the sections. It's easy to remove if you'd like - just delete the "snap" property for each Draggable. 

 

http://codepen.io/GreenSock/pen/gnoDc

 

It was kinda fun to do

[goral]

I noticed you had little notches in the knob, so just updated the codepen to implement snapping so that when you spin the knob or drag the content, it'll snap to the sections. It's easy to remove if you'd like - just delete the "snap" property for each Draggable. 

 

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

 

It was kinda fun to do

Thanks for your help, I too had fun messing around with this little project

[norach14]

In the demo posted above ( 

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

), what would I change in the JS if I wanted the div.box elements to scroll horizontally instead of vertically?

[Carl]

There is a bit of css changes to do, but for the JS its mostly change height to width and top to left.

 

does this work for you: http://codepen.io/GreenSock/pen/IoEFt

[norach14]

There is a bit of css changes to do, but for the JS its mostly change height to width and top to left.

 

does this work for you: 

See the Pen IoEFt by GreenSock (@GreenSock) on CodePen.

 

That's wonderful! Thank you!