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.

I updated to 3.3.4 and it looks like it is working!!! Simple fix! Thanks.

It works in the CodeSandbox... I guess the issue is on my end. I'm using GSAP 3.3.0.

@jSwtch I tried your method and I'm still getting an error: Invalid property scrollTrigger set to Object. I'm not sure it this makes a difference but I was using Sapper. I also tried with Routify but I'm getting the same error.

So I just reversed the way that I had the ScrollTrigger set up. Instead of putting the scrollTrigger inside of the animation, I put the animation inside of the ScrollTrigger.create({animation:...}) and it is now working. I'm not sure if I'd be able to use a timeline with this setup though. I'll try to set something up later to reproduce the issue.

Hello, I'm using Svelte with Rollup to bundle my production app. I'm using ScrollTrigger and getting a warning that the plugin is not registered. If I import and register the plugin and use ScrollTrigger like this: ScrollTrigger.create({}). The plugin will get registered in the production build. If I use ScrollTrigger as scrollTrigger inside a gsap animation, even though I am using gsap.registerPlugin(ScrollTrigger); Rollup seems to be deregistering the plugin.

@GreenSock I was thinking about all these solutions and decided to go with one similar to @nvatland, only I used endTrigger:"html" end:"bottom top" This way I don't have to rely on the footers position. On why I wanted to use ScrollTrigger, I was already loading it into the page, and the sticky css was not working properly on the mobile device browser. If I simply used fixed position for css I still needed to adjust the rest of the page for the difference in height for the header. ScrollTrigger seems to do this for me. Also, If I want to animate the header I now have options. Thanks for all the help and the quick feedback!

Hello, I'm creating a sticky header using pin:true and I have the nav bar set as the trigger and the start position as "top 0px" I'd like the nav bar to stay pinned but I don't know how to set the end trigger to none. Thanks