App-style Modals with Draggable

[PixelBorder]

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)" });
        }
    }
});

See the Pen bGzmONy by pixelborder (@pixelborder) on CodePen

[Rodrigo]

Hi,

 

You can use the trigger property of the Draggable config object:

trigger
[Element | String | Object] - If you want only a certain area to trigger the dragging (like the top bar of a window) instead of the entire element, you can define a child element as the trigger, like trigger: yourElement, trigger: "#topBar", or trigger: $("#yourID"). You may define the trigger as an element or a selector string, or a jQuery object.

 

Here  is a fork of your codepen, I also added a Math.abs() method in order to consider the drag motion both up and down, but you can remove that if you want:

See the Pen NWoOVqb by GreenSock (@GreenSock) on CodePen

 

Another alternative could be the Observer Plugin, but I think that given what you have in place, indeed Draggable is the best choice:

https://gsap.com/docs/v3/Plugins/Observer/

 

Hopefully this helps.

Happy Tweening!

[PixelBorder]

That's perfect thank you Rodrigo - exactly what I was looking for!