maxY in a draggable panel with inertia

[Superloop]

I'm trying to make a panel appear when clicking a button and disappear by dragging it, but it just doesn't work.

 

After clicking the button and showing the panel, if I drag the panel upwards, it moves and I would like it not to move. I have tried with maxY, but I don't know how to do it very well.

 

I would also like to know if there is a way to know when the panel goes to the second snap to be able to remove the "is-open" class from the button.

 

Anyone have any ideas?

Thank you very much.

 

See the Pen PoBQEvv by superloop (@superloop) on CodePen

[Sam Tremblay]

Hello @Superloop!

 

Put a look just there: 

 

[Rodrigo]

Hi,

 

4 hours ago, Superloop said:

if I drag the panel upwards, it moves and I would like it not to move. I have tried with maxY, but I don't know how to do it very well.

For that you have to set edgeResistance to 1. From Draggable docs:

Number - A number between 0 and 1 that controls the degree to which resistance is applied to the element as it goes outside the bounds (if any are applied), where 1 won’t allow it to be dragged past the bounds at all, 0.75 applies a lot of resistance (making the object travel at quarter-speed beyond the border while dragging), and 0.5 would be half-speed beyond the border, etc. This can even apply to rotation.

 

Since this can be triggered by both the button or the Draggable instance you'll have to define a snap function in order to toggle the active class. This would imply that you have to set up the snap threshold as well, but in this case is quite simple because you have the height of the element. In this case I set it up to snap if the dragged distance is more than 1/3 of the height, but you can play with it and find the value it works better for your scenario:

const draggable = Draggable.create(".panel", {
  type: "y",
  edgeResistance: 1,
  inertia: true,
  snap: {
    y: (point) => {
      if (point > $(".panel").outerHeight() / 3) {
        $(".open").toggleClass("is-open");
        return $(".panel").outerHeight();
      }
      return 0;
    },
  },
  maxDuration: 0.4,
  minDuration: 0.1,
  bounds: {
    minY: 0,
    maxY: $(".panel").outerHeight(),
  },
});

Hopefully this helps.

Happy Tweening!

[Superloop]

28 minutes ago, Rodrigo said:

Hi,

 

For that you have to set edgeResistance to 1. From Draggable docs:

Number - A number between 0 and 1 that controls the degree to which resistance is applied to the element as it goes outside the bounds (if any are applied), where 1 won’t allow it to be dragged past the bounds at all, 0.75 applies a lot of resistance (making the object travel at quarter-speed beyond the border while dragging), and 0.5 would be half-speed beyond the border, etc. This can even apply to rotation.

 

Since this can be triggered by both the button or the Draggable instance you'll have to define a snap function in order to toggle the active class. This would imply that you have to set up the snap threshold as well, but in this case is quite simple because you have the height of the element. In this case I set it up to snap if the dragged distance is more than 1/3 of the height, but you can play with it and find the value it works better for your scenario:

const draggable = Draggable.create(".panel", {
  type: "y",
  edgeResistance: 1,
  inertia: true,
  snap: {
    y: (point) => {
      if (point > $(".panel").outerHeight() / 3) {
        $(".open").toggleClass("is-open");
        return $(".panel").outerHeight();
      }
      return 0;
    },
  },
  maxDuration: 0.4,
  minDuration: 0.1,
  bounds: {
    minY: 0,
    maxY: $(".panel").outerHeight(),
  },
});

Hopefully this helps.

Happy Tweening!

 

Thanks @Rodrigo! This works nice!