Jump to content
Search Community

Draggable choose choose only move to down

cleveradvertising 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

Hello, i have a problem with some action i needed to my website.

 

So, what i want its i can control the direction of draggable only to down and when i try move drag to top the section "div" doesn't move just lock.

 

But this action work in first ".post", because i have a list and i have first and last, and when the first just drag to down and last just drag to top.

 

I have this code.

 

If some one can help me with this problem i appreciate. Thanks.

var $post = $(".post");
var boxHeight = $(window).height();

var animation = TweenMax.to(".post", {
  scrollTo: {y: "+=" + boxHeight},
  ease: Power4.easeInOut,
});


Draggable.create(".post", {
	type:"y",
	cursor: "grab",
	throwProps:true,
	edgeResistance:0.7,
	dragResistance:0.3,
	maxDuration : 0.6,
	minDuration : 0.4,
	dragClickables:true,
	zIndexBoost:false,
	onClick:function() {
		console.log("Click");
		TweenLite.set(".post",{cursor:"grabbing"});
	},
	onDragStart:function() {
		TweenLite.set(".post",{cursor:"grabbing"});
		console.log("drag start");
	},
	onDragEnd:function() {
		console.log("drag ended");
	},
	onDrag: updateProgress,
	  onThrowUpdate: updateProgress,
	  snap: { 
	    y: snapY
	  }
});

				
function snapY(y) {
  return Math.round(y / boxHeight) * boxHeight;
}

function updateProgress() {  
  // var norm = normalize(this.x, xMin, xMax);
  var postfst = $(".post.active").attr('id');
  animation.progress(this.y / boxHeight);
  
}

*i cant put the full project in codepen

Link to comment
Share on other sites

This thread has some good examples of how to use a "dummy" draggable to control other elements that are part of a timeline.

http://greensock.com/forums/topic/14916-loop-draggable-carousel/

 

I'll see if I can find what I want. Thank you.

 

What really want is when I make a "draggable" top down a different element move.

Basically the element I click stay fixed, and the animations are applied to the element above.

 

This is something very specific, it is the only task remaining to finish my project.

 

If you want I can create a codepen demo for you to check out better what I need.

 

Thanks for your helping.

Link to comment
Share on other sites

I see where you got that code from now. It's based on Chrysto's page slider...

See the Pen kDvmC?editors=0010 by bassta (@bassta) on CodePen

 

I think making that work with Draggable would require a complete rewrite. Instead of dragging the slides, you could create a simple swipe gesture using Draggable like this. It won't actually drag the slides, but on drag end it will call the a function to trigger the slide change.

See the Pen ObJpYd?editors=0010 by osublake (@osublake) on CodePen

  • Like 2
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...