<script>
    import { onMount } from 'svelte';

    import Reveal from 'reveal.js';
    import 'reveal.js/dist/reveal.css';

    onMount(() => {
        Reveal.initialize();
    });

</script>

<div class="reveal" style="height: 300px; width: 200px; margin: 0 auto">
    <div class="slides">
        <section data-auto-animate>
            <div style="background-color: green" data-id="a">
                <p>test 1</p>
                <p>test 2</p>
            </div>
        </section>
        <section data-auto-animate>
            <div style="background-color: yellow">
                <p>test 3</p>
                <p>test 4</p>
            </div>
            <div style="background-color: green" data-id="a">
                <p>test 1</p>
                <p>test 2</p>
            </div>
        </section>
    </div>
</div>

I’m trying to use reveal.js with SvelteKit.

However, an anomaly is seen in the very simple auto-animate function.
When a slide transition occurs, content is coming in from outside the box boundaries.
Why does this happen? How do I make the contents of the green box appear without going out of bounds?
It can be reproduced by using the page down key or the mouse wheel to scroll through the slides in the linked StackBlitz.

I think I missed something very basic.