Jump to content
Search Community

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

goral test
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

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

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

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

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.
×
×
  • Create New...