Swipe animation between chapters

sillsdev / appbuilder-pwa

Progress Web App template for Scripture App Builder

https://software.sil.org/scriptureappbuilder

MIT License

9 stars 26 forks source link

Swipe animation between chapters #230

Open rpmargetts opened 1 year ago

rpmargetts commented 1 year ago

At the moment when you swipe between chapters, you do not get any animation.

It would be nicer to see something like in Global.Bible: https://myk.global.bible/

which is like we see in our Android and iOS apps. You see the new page arriving and the old page going.

josieang commented 1 year ago

Am I the only one unable to swipe between pages? failed-page-swiping (1)

You can't see it in the gif, but my cursor is in the center of the page

chrisvire commented 1 year ago

@josieang I can get it work on mobile, but it isn't good. Also, if you display a dropdown (like the Text Appearance, Book Selector, or Chapter Selector) or hide/show the audio toolbar then the gesture recognizer stops working. I need to remove it completely. Then we need to look at the carousel for swiping between chapters.

jakedcolbert commented 1 year ago

An alternative to using an npm package: https://daisyui.com/components/carousel/#carousel-with-full-width-items

Can navigate with shift-scroll It's possible to over-swipe and navigate to more than one chapter ahead. Maybe rendering one carousel object in either direction at a time is a solution to that problem?

jakedcolbert commented 1 year ago

detect mobile device: https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser#:~:text=1762-,Using,-Regex%20(from%20detectmobilebrowsers