Jump to content


Draggable choose choose only move to down

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", {
	cursor: "grab",
	maxDuration : 0.6,
	minDuration : 0.4,
	onClick:function() {
	onDragStart:function() {
		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

Ok i will create a simple demo with i have html css and js. because it hard for you understand what i want to do. Thanks

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.



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

If you can't figure how to do it, try to find a demo in the forums, or on CodePen that is close to what you want, and we can use that as a starting off point.

Link to comment
Share on other sites

I've been and I'm looking for something like what I want, I think it better to make a demo and so is easier to see what I want.

Link to comment
Share on other sites

So you only want to be able to drag those slides in a down direction?

  • Like 1
Link to comment
Share on other sites

No, this codepen don't have full animations, like scroll or drag and drop.


The code still in here but doesn't work every actions.


Can i send you the link of my website demo i work and you can see all the actions/animations?

Link to comment
Share on other sites

I want when you try drag the block to bottom, the block u pick stay fixed, and the other block coming from top.

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.