How can I hide the page shadowing?

[Susan123456789]

I am creating a flip book with a front and back cover. I have managed to do this by creating a transparent div that lives on the first half of the page. It looks great, except that when you go to turn the first page, the page shadowing appears over my transparent div. How can I eliminate this page shadowing effect?

<FlipPage
    uncutPages  = {true}
    orientation = "horizontal"
    width       = {flipbookWidth}
    height      = {flipbookHeight}
    maxAngle    = {0}
    pageBackground = "none"
    maskOpacity = {0}
    perspective = "260em"
    >
    <div className="d-flex flex-row">
        <div className="half-width">&nbsp;</div>
        <Page pageNumber={1} width={flipbookWidth/2} />
    </div>
    <div className="d-flex flex-row">
        <Page pageNumber={2} width={flipbookWidth/2} />
        <Page pageNumber={3} width={flipbookWidth/2} />
    </div>
</FlipPage>

[Susan123456789]

Hmmm, when I get to the last page if I use a transparent div for the right half of last page (because we are supposed to be looking at the back cover) then I can see another page underneath. Is there a way I can hide that page???

[darenju]

Do you have a screenshot of what you are seeing? It would make it easier to help you eliminate that.

[Susan123456789]

Shadowing on first invisible page when turning the page:

Third page appearing under invisible last page:

[darenju]

For the second problem, you should use a white background in order to hide the invisible last page.

As for the shadow, there is no option currently. I will add one to disable those shadows.

[darenju]

Hey @Susan123456789 , I added a noShadow property on the component in its 1.6.0 version.

You should use it as shown:

<FlipPage noShadow>
  {/* ... */}
</FlipPage>

[Susan123456789]

Thank you very much!!!!!