Cannot get horizontal scroll to work with svelte using ScrollTrigger

[Lightning]

So I'm trying to implement a basic horizontal scroll which scrolls across 3 sections upon entering a "container" object. But for some reason the scroll is buggy and the scroll doesn't show any of the sections after the first one. I've attached a link to a sveltekit playground demo. Please look into it. Thank you!

 

https://svelte.dev/playground/c3f9045c97d8440daf51e5c2eb354577?version=5.9.0

 

I know this question has been asked a ton before but it hasn't been asked for sveltekit specifically and I'm finding it hard to find a solution for it. Sorry!

[mvaneijgen]

Your issue is that your CSS does not place all the sections next to each other but below each other. As a general tips the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  

 

Below your pen with some CSS add that puts the sections next to each other and for now ScrollTrigger disabled, so that we can see what the animation is doing before we add the scroll logic. 

 

Hope it helps and happy tweening! 

 

 

https://svelte.dev/playground/c3b97847be2b410e8f0f136c243387ef?version=5.9.0

[Lightning]

@mvaneijgen Sorry for the extremely late reply but thank you for solving my problem. I didn't know you had to put the sections next to each other and also thanks for the tip for making the animation first and then applying the scrolltrigger!