Closed masafumimori closed 1 year ago
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
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 afterNode Js
text goes away from the screen. ButAPI
text appears beforeExpress
text completely disappears. (Hope you will get what I mean here).Is there any way to control overlapping and not-overlapping each other?