[Bug]: Elements inside a div appear on the bottom
sneazy-ibo opened 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.
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!