flipOnTouch and goto methods - uncutPages does not work, half the animation does not work

[joefhall]

Hi, thanks again for this great component. I've noticed a couple of things not working when using the flipOnTouch property set to true or the gotoPreviousPage or gotoNextPage methods:

1. I really like the effect of the uncutPages property, where the edges of the pages are allowed to overflow through the container when flipping. However, if you also use flipOnTouch or the goto... methods listed above, the overflow effect no longer works.

2. Also, half of the page turning animation doesn't work when using flipOnTouch or those goto... methods. When going to the next page, the turning page does not gradually cover over the existing right-hand page (it animates smoothly across the left-hand page as expected, then after a slight pause it immediately/jerkily covers the right-hand page). The same thing happens in reverse with the left-hand page when going to the previous page.

Would it be possible to fix these?

Example

Tested on Chrome 81.

Works as expected: with uncutPages enabled but just using swipe to change page:

<FlipPage
        animationDuration={1000}
        orientation="horizontal"
        responsive
        uncutPages
      >
    ...pages content...
</FlipPage>

Problems occur: with uncutPages enabled and flipOnTouch enabled (or using gotoPreviousPage or gotoNextPage methods):

<FlipPage
        animationDuration={1000}
        flipOnTouch
        orientation="horizontal"
        responsive
        uncutPages
      >
    ...pages content...
</FlipPage>

[joefhall]

Sorry, I've just seen 2. in my issue above has already been (at least partly) raised in issue #135

[darenju]

Thanks for reporting, I’m investigating…

The component is becoming very hard to maintain, and since there has been A LOT of API changes in React… it would need a total rewrite.

[joefhall]

Thanks for looking into it.

Eek, sounds painful... sorry to hear that. If anything is possible in the meantime that would be great.