[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](https://private-user-images.githubusercontent.com/41344259/320663637-a0728a0e-6abd-4da2-9c62-138a842a7ceb.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2NDU1MjAsIm5iZiI6MTcxOTY0NTIyMCwicGF0aCI6Ii80MTM0NDI1OS8zMjA2NjM2MzctYTA3MjhhMGUtNmFiZC00ZGEyLTljNjItMTM4YTg0MmE3Y2ViLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI5VDA3MTM0MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJlZDA2MWRhMTM3OTE1MzUyMzcwYmE4ZjUwYTZlN2MxNGI0MTFmNzIyMGZmMGM5ZjEyNzI5ZWViYjdhNDIwMTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Rf_hP9WwWdoqGWdCrJ1hquD0h4xZ6_46FCEf1r6NVnQ)
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!