<div class="example">
    <section class="scroll-section"><pre>Scroll</pre></section>
    <section class="scroll-section"><pre>to</pre></section>
    <section class="scroll-section"><pre>trigger</pre></section>
    <section class="scroll-section"><pre>animations!</pre></section>
</div>

<script type="module">
    import { animate, inView } from "https://cdn.jsdelivr.net/npm/motion@12.7.3/+esm"

    inView(".scroll-section pre", (element) => {
        animate(
            element,
            { opacity: 1, x: [-100, 0] },
            {
                duration: 0.9,
                easing: [0.17, 0.55, 0.55, 1],
            }
        )

        return () => animate(element, { opacity: 0, x: -100 })
    })
</script>

<style>
    body {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .example {
        display: flex;
        flex-direction: column;
    }

    .scroll-section {
        box-sizing: border-box;
        width: 100svw;
        height: 100vh;
        display: flex;
        justify-content: flex-start;
        overflow: hidden;
        padding: 50px;
        background: var(--hue-1-transparent);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .scroll-section:nth-child(2) {
        background: var(--hue-2-transparent);
    }

    .scroll-section:nth-child(3) {
        background: var(--hue-3-transparent);
    }

    .scroll-section:nth-child(4) {
        background: var(--hue-4-transparent);
    }

    .scroll-section pre {
        font-size: 48px;
        color: #ff0088;
        display: block;
        transform: translateX(-100px);
        opacity: 0;
    }

    .scroll-section:nth-child(2) pre {
        color: #dd00ee;
    }

    .scroll-section:nth-child(3) pre {
        color: #9911ff;
    }

    .scroll-section:nth-child(4) pre {
        color: #0d63f8;
    }
</style>