Using gotoNextPage after flip half page correctly but the other half flips immediately without notice

[shivani619]

I am using react-flip-page. After 5 seconds of interval I call gotoNextPage() function. The animation for flipping is given 4000 keeping it slow, to give a book change feel.

    `<FlipPage 
      ref={flipPage}
      orientation="horizontal"
      animationDuration={4000}
      disableSwipe={true}
      width="100%"
      loopForever
    ></FlipPage>`

But, it shows the flipping until half page is folded, the second half (on the left part) is flipped without notice at once. When we do it with swipe slowly, it seems fine.

[darenju]

Hello, Can you make a short video describing the behavior please?

[shivani619]

20092417312009241731.zip

Hi, I have attached the zipped file of a video. If you notice, when page starts flipping, it works fine till it reached the half part of image. The left part just changes immediately. Here I am not flipping page using swipe, I am just using gotoNextPage() function after specific interval to slide the image.

Also, when try to swipe it myself manually, it works fine. Please suggest, if I am doing anything wrong.

[darenju]

It looks like the image under the flipping page is not being displayed. But that seems weird as it displays correctly after the delay is over…

Could I suggest that you use base64 encoded images to try and see if the problem is with delay loading the images?