I'm trying to create app-style modals using Draggable but I've run into a problem.
These will only be visible on mobile/touch devices. At the minute it allows the user to swipe away the modal if they touch and swipe anywhere on the modal - the issue is that sometimes the modal content needs to be scrollable.
What I'd like to be able to do is allow the user to swipe the modal away by pressing and swiping on the red bar at the top but I can't figure out how to do it.
I tried with the following code but it made the red bar and the modal both scrollable independent of each other.
Any help would be greatly appreciated!
Draggable.create(".compact-menu-header", {
type: "y",
inertia: false,
onPress: function() {
this.update(); // Update the Draggable instance to get the latest position.
},
onDrag: function() {
// Move the modal card, not the header
var modalCard = document.querySelector(".modal-card");
gsap.set(modalCard, { y: this.y });
},
onDragEnd: function() {
var modalCard = document.querySelector(".modal-card");
var threshold = window.innerHeight * 0.45;
if (this.y > threshold) {
document.querySelector(".modal-container").classList.remove("open");
gsap.set(modalCard, { y: 0 }); // Reset the position of the modal
} else {
gsap.to(modalCard, { y: 0, duration: 0.2, ease: "elastic.out(0.5,0.4)" });
}
}
});