[Bug]: List revealed in wrong order

[Skeyne]

Describe the bug

List revealed in wrong order for the first rendered component of that type. Using sveltekit with SSG ('@sveltejs/adapter-static'). Tried wrapping app in if statement as per docs, pre-building RevealOptions and setting ssr=false but still can't find a fix. When hot reloading after a code change reveal order works correctly. Issue with initial component mount?

Reproduction

Code for component in question:

<script lang="ts">
    import { reveal } from 'svelte-reveal';
    import type { RevealOptions } from 'svelte-reveal';
    export let delay: number = 0;
    export let stagger: number = 0;
    export let header: string;
    export let items: string[];

    const headerRevealOptions: RevealOptions = { transition: 'fade', delay: delay };
    const itemsRevealOptions: RevealOptions[] = [];
    for (let index = 0; index < items.length; index++) {
        const element: RevealOptions = { transition: 'fade', delay: delay+stagger*(index+1) };
        itemsRevealOptions.push(element);
    }
</script>

<div use:reveal={headerRevealOptions} class="flex flex-col">
    <div class="text-2xl">{header}</div>
    <ul class="list-none">
        {#each items as item, i (item)}
            <li use:reveal={itemsRevealOptions[i]} class="text-xl">
                {item}
            </li>
        {/each}
    </ul>
</div>

<style>
    ul {
        border-left: 0.2rem solid goldenrod;
        margin-left: 1rem;
        margin-top: 0.5rem;
    }
    ul li {
        position: relative;
        margin-left: 1.5rem;
        padding-left: 0.5rem;
        top: 0.75rem;
    }

    ul li::before {
        content: '';
        display: block;
        width: 1.5rem;
        height: 0.2rem;
        background-color: goldenrod;
        position: absolute;
        left: -1.5rem;
        top: 0.8rem;
    }
</style>

System Info

Windows 11, Node v18.16.1, SvelteKit, Google Chrome

Severity

Serious, but I can work around it

Additional Information

Current workaround: create component of same type with 0 delay and making it invisible seems to work without affecting page layout

[DaveKeehl]

Hi! Thank you for filing this bug. I'll try to look into it in the coming days

[DaveKeehl]

@Skeyne hey sorry for the veryyy late reply. I took a long break from this project and I've resumed its development only in the past few weeks.

Using the code you provided I wasn't able to replicate the list being revealed in the wrong order. I've noticed however that you are using the use:reveal directive both on the top-most div, as well as on each list item. This causes the transition on the parent element to take precedence.

Do you have a proper reproduction environment for me to take a look?

[DaveKeehl]

Closing as stale