Jump to content
GreenSock

martis

Best way to manually set "y" position on a draggable object with a trigger?

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,

 

Been loving the new draggable, had a hopefully simple question.

 

What is the best way to manually set the "y" position on a draggable object with a trigger?

 

I am basically wanting to hyperlink within my draggable object (jump to a position).

 

Do I move my trigger or the actual draggable target itself? Thanks!

 

Code below:

Draggable.create('#proxy', {
	type:"y", 
	bounds:$('#proxyContainer'),
	trigger:$('#site'),
	force3D:true,
	zIndexBoost:false,
	edgeResistance:.8, 
	throwProps:true,
	
	onDrag:function () {
		processMobileTimeline(this.y); 
	}, 
					
	onThrowUpdate:function() {
		processMobileTimeline(this.y); 		
	},
	
	
});

Link to comment
Share on other sites

If I understand your question correctly, you'd move the target itself, not the trigger. Like TweenLite.set("#proxy", {y:100});

 

You're not trying to do that during the drag, though, are you? That probably wouldn't work because when you start dragging, it must record the beginning values and then on each move, it offsets from those values. 

Link to comment
Share on other sites

Thanks,

 

I update the y position manually, try to call update() on the draggable instance to sync it, then Draggable is firing off onThrowUpdates after the click event happens, but the y position I set is not syncing with the y position on the draggable instance.

 

I am trying to call update() but am not having luck...

TweenMax.set($proxy, {css:{y:yPos}});

var draggable = Draggable.get("#proxy");

draggable.update();

console.log('update: ' + $proxy.position().top); // reports the correctly updated y position

onThrowUpdate:function() {
console.log(this.y); // does not report the update, remains at 0 if i haven't scrolled the page
	processMobileTimeline(this.y); 		
},

Link to comment
Share on other sites

I think there's a misunderstanding at play here - the Draggable's "y" property refers to its translateY transform for type:"y" or type:"x,y", and it refers to the "top" css property for type:"top" or type:"left,top". jQuery's position().top, however, refers to the current coordinates of the element, relative to the offset parent. That's a very different measurement. 

Link to comment
Share on other sites

I changed my code and got the update() to work, but when I start to drag again it is not honoring the newly updated "y" position, defaults back to 0, as if it never moved...

yPos = 1000;
			
TweenMax.set($proxy, {css:{y:yPos}});

var draggable = Draggable.get("#proxy");

console.log('draggable before update: ' + draggable.y); // returns 0
			
draggable.update();

console.log('draggable after update: ' + draggable.y); // returns 1000



onDrag:function () {
	console.log('drag: ' + this.y); // defaults at starting at 0, even after update
}, 
Link to comment
Share on other sites

You're not trying to change the "y" WHILE dragging, are you? Any chance you could post a super simple codepen or jsfiddle? 

Link to comment
Share on other sites

Not changing the Y while dragging :)

 

Let me look at codepen and try to get an example up, never done one before

Link to comment
Share on other sites

I made a fiddle that illustrates the problem. Notice that the onclick is inside the trigger, you can see the target jump then for some reason the onThrowUpdate is getting called and not honoring the update()

 

http://jsfiddle.net/2ZDf8/7/

Link to comment
Share on other sites

Ah yes, the onThrowUpdate is indeed getting called even though it shouldn't when a "click" is interpreted, but that'll be fixed in the next update (stand by for that).

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