Pins not working

[mbpictures]

Hi!

I used your example to get Pins working with next.js. As I got an error, that the "childHeight" prop is required, i replaced the number 0 with the string 0, which worked in the example sandbox (using version 0.2.7). However, it doesn't work in my local project (all containers just scroll as normal, without the stickyness).

Here's my page code:

import * as Scrollytelling from "@bsmnt/scrollytelling";

import "./style.css";

export default function Home() {

    return (
        <main>
            <Scrollytelling.Root>
                <Scrollytelling.Pin
                    childHeight={'0'}
                    pinSpacerHeight={'100vh'}
                    top={0}
                >
                    <section className="section">
                        <div className="wrapper">
                            <h1>Layered pinning 1</h1>
                        </div>
                    </section>
                </Scrollytelling.Pin>
            </Scrollytelling.Root>

            <Scrollytelling.Root>
                <Scrollytelling.Pin
                    childHeight={'0'}
                    pinSpacerHeight={'100vh'}
                    top={0}
                >
                    <section className="section orange">
                        <div className="wrapper">
                            <h1>Layered pinning 2</h1>
                        </div>
                    </section>
                </Scrollytelling.Pin>
            </Scrollytelling.Root>

            <Scrollytelling.Root>
                <Scrollytelling.Pin
                    childHeight={'0'}
                    pinSpacerHeight={'100vh'}
                    top={0}
                >
                    <section className="section">
                        <div className="wrapper">
                            <h1>Layered pinning 3</h1>
                        </div>
                    </section>
                </Scrollytelling.Pin>
            </Scrollytelling.Root>

            <Scrollytelling.Root>
                <Scrollytelling.Pin
                    childHeight={'0'}
                    pinSpacerHeight={'100vh'}
                    top={0}
                >
                    <section className="section orange">
                        <div className="wrapper">
                            <h1>Layered pinning 4</h1>
                        </div>
                    </section>
                </Scrollytelling.Pin>
            </Scrollytelling.Root>
        </main>
    );
}

and style.css

:root {
    --color-black: #000;
    --color-orange: #ff4d00;
    --color-white: #fff;
}

main {
    margin-bottom: 20px;
}

h1,
p {
    font-family: Lato;
    margin: 0;
}

h1 {
    width: max-content;
}

.section {
    min-height: 100vh;
    background-color: var(--color-black);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section.orange {
    background-color: var(--color-orange);
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

I also added the reset.css, which didn't work either. I also specified the childHeight with "100vh" with no effect. Do you have any idea on how to fix this? Thanks very much for this awesome project!

[mbpictures]

Update: I set "overflow-x" to hidden on the body element. Removing this solved the issue.