sandman

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.

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

In the example provided, I am trying to keep the first div pinned after the animation plays in the timeline. If I set the end to a greater percentage, it just extends the timeline out. I'd like to pin the dive, run the timeline, and then keep the dive pinned so the next div will scroll on top of the first div. If I set pinSpacing to false, the animation and scroll happens at the same time. I'm not sure how to do this. Thanks!

Ahhh! Okay, I need to bind:this={content} and bind:this={wrapper} to my variables respectively and explicitly define the content and wrapper in the SmoothScroller instantiation! Sorry for the bother. This has been a great learning process!

I think I see what's happening. It looks like the wrapper that SmoothScroller creates is including the Fixed button in the wrap. I've tried to explicitly define the wrapper but then gsap cannot find the content wrapper.

Oh, dumb mistake. Yup, that makes it work. So, I'm trying to create this effect in Sveltekit. I must be an issue with Sveltekit then.

Here is an example. https://codepen.io/sandman18/pen/PoaqPJx

So, I've tried to place a button on the bottom of the page outside of the wrapper and also the top. If before the wrapper it moves with the page and if after the wrapper, it won't be seen. If I add padding to the bottom as I see the docs mention to do if an element is cut off, I can start to see the button but I would assume it would be fixed to the viewport and should be above the content. Thanks!

Just following up on this one. Does ScrollSmoother create an issue for fixed elements?

This works! Thanks.

And in our example it would be just adding panel.offset(), duration: 1, to the existing tween? Or are you creating another tween here. Sorry, the docs are a little confusing.

Great! One last question. When adding a fixed element to the page, it doesn't stay fixed. Is there something happening here that I'm not aware of.

Is there a way to control the speed of the scroll without changing the original smooth setting? I'd like smooth:1 on the initail but I would like the scrollTo to take a little longer on the scroll, also maybe an easing as well. Thanks!

Yes, this makes perfect sense. Where are you getting the trigger array from though? Is that created by gsap? If so can you point me to the documentation? ** I see it now.** Thanks.

Hello, I have two buttons on my second panel. One to scroll to the first panel and the second to scroll to the third panel. SmoothScroller is scrolling to the third panel but not back to the first panel. I'm curious as to what is happening here and why it is not going back to the top of the first panel. Thanks for the help.