DaveKeehl / svelte-reveal

Svelte action that leverages the Intersection Observer API to trigger reveal on scroll transitions.
https://stackblitz.com/edit/svelte-reveal?file=src%2FApp.svelte
MIT License
131 stars 3 forks source link

[Bug]: Elements inside a div appear on the bottom #214

Closed sneazy-ibo closed 5 months ago

sneazy-ibo commented 5 months ago

Describe the bug

Whenever I add a transition to any element to my components it will appear as the last one in my divider.

image

In the screenshot provided above I added a reveal transition to the Text 1 header and it jumps down whenever I reload my page and the animation statrts

Reproduction

I am currently working on a website for an app in a private repo, I wanna publish it as soon as it's ready so I could add a dev there as a contributor to test it. Here is the code for my component where the issue exists:

<script>
    import HeroImage from '../../components/quarks/HeroImage.svelte';
    import Button from '../quarks/Downy.svelte';
    import { reveal } from 'svelte-reveal';

    function handleClick() {
        const el = document.querySelector('#aw');
        if (!el) return;
        el.scrollIntoView(true);
    }
</script>

<section id="home" class="wrapper">
    <div>
        <h1 use:reveal>Text 1</h1>
        <h1>Text 2</h1>
        <h3>Text 3</h3>
        <h4>Text 4</h4>
</section>

System Info

System:
    OS: macOS 14.3.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 8.06 GB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.1 - /usr/local/bin/node
    Yarn: 1.22.21 - /usr/local/bin/yarn
    npm: 10.5.0 - /usr/local/bin/npm
  Browsers:
    Safari: 17.3.1

Severity

Blocking

Additional Information

No response

DaveKeehl commented 5 months ago

Thanks for filing a bug report, I'll look into it. I already know what might be the problem. On a side note, which version of Svelte Reveal are you using? Are you using SvelteKit?

DaveKeehl commented 5 months ago

Can confirm, it was what I thought it was. You can expect a minor release very soon šŸ‘šŸ»

sneazy-ibo commented 5 months ago

Tysm for the quick reply, I installed Svelte-Reveal 1.0.4 and the latest SvelteKit version since I created my project with npm create svelte@latest I can't check which version it is exactly at the moment but I didn't use Svelte 5 Preview if that helps :)

DaveKeehl commented 5 months ago

@sneazy-ibo version 1.1.0 is out now. Thanks again for opening this bug report!

sneazy-ibo commented 5 months ago

Thanks for letting me know!