osrec / SuperSlide.js

A flexible, smooth, GPU accelerated sliding menu for your next PWA
https://osrec.co.uk/products/superslidejs
GNU General Public License v3.0
490 stars 21 forks source link

Add "overlay" option #2

Open JacobDB opened 6 years ago

JacobDB commented 6 years ago

On most Andorid and iOS apps, when you open a menu, the viewport gets covered by a black overlay at 50% opacity. As you swipe, the overlay starts at 0% opacity, and as the menu opens, it fades to 50% opacity when the menu is fully open.

I could add an overlay the gets enabled on open or close, but I don't think your APIs let me add this kind of variable opacity overlay myself.

JacobDB commented 6 years ago

Here's a video demonstrating how this works:

https://gfycat.com/PositiveNastyGrayfox

JacobDB commented 6 years ago

Something like onDrag that returns the current percentage completion could work nicely for this... I could do something like...

onDrag: (position) => {
    OVERLAY.style.opacity = position / 2;
}