Jump to content
GreenSock

MarcoDnk

Draggable - set the content position (scrollTo)

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,

 

i've got a Draggable that works pretty nice :)

Draggable.create(jContainer, {type:"scrollLeft", edgeResistance:.8, throwProps:true});

I'd like to animate the x position of my content when clicking on a button outside the draggable

jBtn.click(function(){
//here, move my container content inside the draggable 
TweenLite.to(???, .7, {x:-560});
});

i can't find how to...

 

 

Link to comment
Share on other sites

Hi and welcome to the Greensock forums.

 

You should definitely try Greensock's scrollTo plugin, it has no library dependencies and you get amazing results with it, and you shouldn't get any problems using it with Draggable.

 

http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html

 

In this case the syntax would be like this:

TweenLite.to(element, .7, {scrollTo:{x:200}, ease:Power2.easeOut});

You can check this simple sample of how it works with click events for a specific point in pixels and also for a DOM object position:

 

http://codeaway.info/greensock-animation-platform-scroll-to-plugin-sample/

 

Best,

Rodrigo.

  • Like 3
Link to comment
Share on other sites

For what it's worth, there's an undocumented "scrollProxy" object that you can use to manually alter the scroll position of a Draggable whose type is "scroll" | "scrollTop" | "scrollLeft". It has a scrollTop() method and a scrollLeft() method that you can feed a value to, like:

yourDraggable.scrollProxy.scrollLeft(100);

And you can get the value like:

var currentScrollLeft = yourDraggable.scrollProxy.scrollLeft();

The nice thing about this approach is that it actually allows you to overscroll (go beyond where it'd normally end) whereas normal scrollTo in browsers won't allow that sort of thing. 

 

Does that help?

  • Like 1
Link to comment
Share on other sites

Hi,

 

thanks for your welcome :)

 

@Rodrigo allready tried but doesn't match my needs

 

@Jack exactly what i need

 

many thanks !

var ghostScrollPositon = {
	scrollLeft:myDraggable.scrollProxy.scrollLeft();
};
	
TweenLite.to(ghostScrollPositon, .7, {
	scrollLeft:560, 
	ease:Power4.easeInOut, 
	onUpdate:function(){
		myDraggable.scrollProxy.scrollLeft(ghostScrollPositon.scrollLeft);
	}
});
Link to comment
Share on other sites

For what it's worth, there's an undocumented "scrollProxy" object that you can use to manually alter the scroll position of a Draggable whose type is "scroll" | "scrollTop" | "scrollLeft". It has a scrollTop() method and a scrollLeft() method that you can feed a value to, like:

yourDraggable.scrollProxy.scrollLeft(100);

And you can get the value like:

var currentScrollLeft = yourDraggable.scrollProxy.scrollLeft();

 

 

Hi Jack,

 

I'm having problems with the scrollProxy object.

 

If you look at this fiddle http://jsfiddle.net/gpYyQ/ and check the console, it keeps telling me scrollProxy is undefined.

 

But when I look at the Draggable object, I can clearly see it's there.

What am I doing wrong?

Link to comment
Share on other sites

Thanks for the fiddle.

 

Ah, yes, Draggable.create() returns an Array of Draggable instances

 

Docs: Dragable.create()

 

In your example you would just need to find the first Draggable in that Array like so:

console.log(contentDraggable[0].scrollProxy.scrollTop())

Here is an updated fiddle: http://jsfiddle.net/gpYyQ/1/

  • Like 1
Link to comment
Share on other sites

Hi Steven,

 

I've created the following codepen, I don't know if it adjusts to your needs, but anyway is a simple example of how Draggable and the ScrollTo plugin work together:

 

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

 

Best,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Is there a way to easily update the position through Draggable if the type is "x" or "left"? I'm aware that I could just update the css properties of the draggable element to whatever, but that's especially troublesome if type is "x", since different browsers use different properties. 

 

(And even in case this isn't possible, thanks for a great product. ;))

Link to comment
Share on other sites

Hi and welcome to the Greensock forums.

 

I'm not sure if I understand correctly what you're asking.

 

You mean update the parent's scroll position while using Draggable with type "x" or "left" on the child element?.

 

When you use Draggable to change the "x" or "left" the engine works on that particular property which has completely different effects over the scroll width of the container, but not the scroll value.

 

You could try this simple code:

HTML

<div id="wrapper">
  <div id="child"></div>
</div>

CSS

body
{
  background:#000;
  margin:0;
}

#wrapper
{
  height:250px;
  width:500px;
  border:solid 1px #fff;
  padding:10px;
  margin:10px;
  overflow:auto;
}

#child
{
  height:220px;
  width:1500px;
  background:#eee;
  position:relative;
}

JS

var wrapper = $("#wrapper"),
    child = $("#child");

Draggable.create(child,
{
  type:'left'
});

And you'll see how the scroll bar either grows or shrinks when you drag the child element.

 

If this is not what you have in mind please and if what you're trying to achieve doesn't meet the scope of this particular post, please start a new post. Otherwise keep your replies here.

 

Also it'd be very helpful if you could create a simple codepen or jsfiddle with what you have in mind in order to get a better grasp of your idea.

 

Best,

Rodrigo.

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