sandman Posted January 16, 2023 Posted January 16, 2023 Hello, I'm trying to understand how a timeline should work with/through components. In my example I'm using SvelteKit. I created a timeline for each section. Section 2 is a component imported into the main page and has its own timeline. If I run the same code that is in the component in the main section (without importing the component), everything seems to work smoothly, however, when I run this code with the component, there is a large white space that shows below the second section. Any help understanding would be appreciated. https://stackblitz.com/edit/gsap-test?file=src/routes/+page.svelte
Rodrigo Posted January 16, 2023 Posted January 16, 2023 Hi, I'm far from being an expert in Svelte/SvelteKit. The one thing I could recommend you is to wait for the parent page to be done and then render the child component. Is there a way in Svelte to do that? What I tried is to remove the ScrollTrigger instance of the page and keep only the one for the Second component and everything worked as expected. Then fiddling around I modified your example into this: https://stackblitz.com/edit/gsap-test-ktgf3t?file=src%2Froutes%2F%2Bpage.svelte,src%2Flib%2Fsections%2FSecond.svelte Now what's really baking my noodle is the fact that a 0 millisecond timeout shouldn't have any effect whatsoever, but it works ?♂️ Does that makes any sense to you? I came to that example while giving the second component some time before creating the ScrollTrigger instance. Of course this is a hack and not a solution, which makes me uncomfortable. Like I said, if there is a way in svelte to tell the child component that the page is done and that the parent's component is ready in order to create the ScrollTrigger instance on the Second component would be the key for this. Hopefully this helps. Let us know if you have more questions. Happy Tweening!
sandman Posted January 17, 2023 Author Posted January 17, 2023 Adding a setTimeout makes sense regardless of the time delay because the setTimeout doesn't run until the stack is cleared, so it wouldn't add the Second timeline until the first timeline is added. It looks like with Svelte the child component mounts first inside of onMount and also with actions. This was actually surprising to me so I'm not really sure how to make the parent component load first. Back to the drawing board. Thanks for the look.
vsimak Posted January 19, 2023 Posted January 19, 2023 I had 2 production websites in Sveltekit + GSAP, and using setTimeout was my random hacky way of making it work / wait for dom. Just came back to the forums to see if someone found a more elegant solution!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now