DaveKeehl/svelte-reveal

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

Closed this issue ยท 5 comments

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

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?

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

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 :)

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

Thanks for letting me know!