Draggable Pull Down to Dismiss

[trifectaty]

Hey ya'll,

 

New to gsap and draggable, trying to mimic a "Pull Down to Dismiss" effect like you will commonly see in native mobile apps. I am sure I am doing to something wrong and could really use some guidance. I have to set my animation duration unrealistically high to accomplish the effect which makes using the then promise from gsap.to - overall where I am at feels hacky, but I can't seem to find a good path in docs.

 

Below is an example of what I am hoping to achieve on all popular mobile browsers:

 

 

Pen:

 

 

See the Pen ZEpqNWv by itjunkii (@itjunkii) on CodePen

[ZachSaucier]

Hey trifectaty and welcome to the GreenSock forums. 

 

The core of your approach is a very good one but some of the details could definitely be improved.

• It's better to animate y or yPercent rather than top/bottom. 
• It's better to disable and enable instead of killing and recreating.
• In general it's better to use bounds rather than liveSnap to restrict movement but I understand if you don't want to in this case since bounds is based on the parent's positions.

Altogether:

var $draggable = $(".draggable");
var $header = $(".header");
var draggable;

initDraggable();

function reset() {
  gsap.set($draggable, { y: 0, yPercent: 0 });
  draggable.enable();
}

function initDraggable() {
  draggable = Draggable.create($draggable, {
    trigger: $header,
    type: "y",
    edgeResistance: 0.2,
    liveSnap: {
      y: function (y) {
        if (y < 0) return 0; // Restricts dragging to down
        return y;
      }
    },
    onDrag: function () {
      $(".yPos").html("y: " + this.y);

      if (this.y > 60) { // if this threshold is met animate it off screen - pull down to dismiss!
        this.disable(); // Without this no animation
        animateOut();
      }
    }
  })[0];
}

function animateOut() {
  gsap.to($draggable, {
    yPercent: 100,
    duration: 1, 
    ease: "circ"
  }).then(reset);
}

Happy tweening!

[trifectaty]

That did the trick - thank you so much!!