Jump to content
Search Community

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

martis 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,

 

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

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