I recently started on a personal project for myself and used the Parallax component from the react-scroll-parallax package. Here is the documentation in advance: https://react-scroll-parallax.damnthat.tv/docs/intro
I successfully applied it, but the problem is that there is extra whitespace whenever I'm scrolling it.
This is the page [before you scroll](https://imgur.com/a/h6WA7BH)
The page [after you scroll](https://imgur.com/a/SA5vSR3)
And here is the [result I want](https://imgur.com/a/eozU6Qk)
I get the result whenever I disable the `Parallax` component.
This is the code I use:
```<Parallax speed={25}>
<div className="header-image h-screen">
<div
id="welcomeMessage"
className="welcomeMessage relative text-9xl font-bold text-center text-white antialiased cursor-pointer tracking-wide shadow-text top-1/2 left-1/2 z-1">
<Typewriter
onInit={(typewriter) => {
typewriter
.typeString('Welconr!')
.changeDelay(175)
.pauseFor(200)
.deleteChars(3)
.changeDelay(150)
.pauseFor(150)
.typeString('me!')
.changeDelay(175)
.start();
}}
/>
</div>
</div>
<div className="header-svg-clip">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 text-white arrowDown"
viewBox="0 0 20 20"
fill="currentColor">
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z"
clipRule="evenodd"
/>
</svg>
</div>
</Parallax>
```
I hope there is someone who can help me. If you need anything more, just comment and I'll come back to you.
Thanks in advance!