Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
trifectaty

Draggable Pull Down to Dismiss

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:

 

pkX9b.gif

 

Pen:

 

 

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.

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!

  • Like 1
Link to comment
Share on other sites

That did the trick - thank you so much!!

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