osrec / SuperSlide.js

A flexible, smooth, GPU accelerated sliding menu for your next PWA

Home Page:https://osrec.co.uk/products/superslidejs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add "overlay" option

JacobDB opened this issue · comments

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.

Here's a video demonstrating how this works:

https://gfycat.com/PositiveNastyGrayfox

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