Jump to content


Draggable Pull Down to Dismiss

Moderator Tag
Go to solution Solved by ZachSaucier,

Recommended Posts

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:







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

Link to comment
Share on other sites

  • Solution

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.


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


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

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

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

Happy tweening!

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