Jump to content
Search Community

Timeline with Components

sandman test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...