Jump to content
GreenSock

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

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

Recommended Posts

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!!

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 ;)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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? 

  • Like 1
Link to comment
Share on other sites

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 :)

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

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?

Link to comment
Share on other sites

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!

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.
×