How can I prevent overlapping previous `ScrollPage` component?

[masafumimori]

This library is amazing! Thanks for creating it.

This is not an issue but more like a question.

So I am implementing scroll animation on Gatsby project and it works fine. But I was wondering how I can prevent the next ScrollPage component from overlapping the previous component.

In the example here, you will see Express text after Node Js text goes away from the screen. But API text appears before Express text completely disappears. (Hope you will get what I mean here).

Is there any way to control overlapping and not-overlapping each other?

[masafumimori]

Well... I kinda figured it out how to avoid overlapping. You just need to insert an empty ScrollPage in between components you don't want them to be overlapped.

So I did like:

<ScrollPage>
    <Animator animation={FadeUp}>
      // some component
    </Animator>
</ScrollPage>
// this prevents overlapping the component below to the above
<ScrollPage>
    <Animator animation={FadeUp}>
      <></>
    </Animator>
</ScrollPage>
<ScrollPage>
    <Animator animation={FadeUp}>
      // some component2
    </Animator>
</ScrollPage>

This might not be the best solution, but it seems to be working for my case and hope this will help others who may have the same concern