ScrollSmoother interfering with image comparison

[denisholc7]

Hi, 
I am a beginner and I'm trying to learn GSAP.

i tried gsap-trial and scrollsmoother. It works well but the issue is that the image will disappear and appear at the bottom (or top if I scroll back to top). I tried ot set data-smooth to false but it doesn't really help. And I am talking about that one.
 

So now the only solution is to disable the ScrollSmoother, unless someone else knows the solution? Thank you

[GSAP Helper]

Hi @denisholc7 and welcome to the GSAP Forums!

 

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[denisholc7]

Hi and thank you for your fast reply. I've tried to replicate with GSAP Starter Template but unfortunately it didnt work. The text was stuck on the left and I couldn't scroll down anymore. I decided to remove everything and followed that SvelteKit template. It didnt work, until I removed dynamically imported gsap and scrollsmoother from my project.
 

const { gsap } = await import('gsap');

const { ScrollTrigger } = await import('gsap/ScrollTrigger');

Now it works. So I can have a smoothscroller and that image comparison with ScrollTrigger. Unfortunately, I got another issue. I am also pinning hero section:
 

 

onMount(async () => {

 

gsap.registerPlugin(ScrollTrigger);

 

gsap.to(".sticky-hero", {

scrollTrigger: {

trigger: ".sticky-hero",

start: "top top", // start the pinning when the top of the element reaches the center of the viewport

end: "+=4000",

pin: true, // pin the element in place

scrub: true, // smooth the pinning effect

},

});

 

// Add another GSAP animation for the LeftNavbar component

 

});

And in order to scroll to the bottom of the page, I have to set #smooth-content to height of 12000px in order to get to the bottom. I know that without a minimal demo is hard for anyone to guess if this is normal. I will try gsap when I start another project from scratch as I am a beginner and already have so many components in my projects, so it's confusing. 

So my questions are:

1.) There shouldn't be a problem mixing all gsap functions? Like ScrollTrigger, ScrollSmother, pin, etc?

2.) Does is matter if I set height so high? Because with 12000px. I also have 8 components on page so I can assume that it's fine?
3.)If I start with SvelteKit from scratch, I should do exactly like how it's in the template? That's how I should set everything from the beginning right?

Thank you again for your time and help.

[Rodrigo]

Hi,

2 hours ago, denisholc7 said:

1.) There shouldn't be a problem mixing all gsap functions? Like ScrollTrigger, ScrollSmother, pin, etc?

There shouldn't be any issues in using GSAP Tweens/Timelines, ScrollTrigger and ScrollSmoother in any type of app (Svelte/SvelteKit, Vue/Nuxt, React/Next). We have a collection of SvelteKit starter templates on Stackblitz that you can check:

https://stackblitz.com/@gsap-dev/collections/gsap-sveltekit-starters

 

2 hours ago, denisholc7 said:

2.) Does is matter if I set height so high? Because with 12000px. I also have 8 components on page so I can assume that it's fine?

As you mention without a demo is hard for us to tell, maybe you have too many elements/components with an absolute or fixed position which are taken out of the document flow and kind of forces you to add some height to the body element, but that shouldn't be needed in normal circumstances.

2 hours ago, denisholc7 said:

3.)If I start with SvelteKit from scratch, I should do exactly like how it's in the template? That's how I should set everything from the beginning right?

Again you can check our starter templates in Stackblitz and use the one for ScrollSmoother as a reference:

https://stackblitz.com/edit/sveltejs-kit-template-default-dvnud9?file=src%2Froutes%2F%2Bpage.svelte

 

Hopefully this helps.

Happy Tweening!

[denisholc7]

Alright. Thank you for the help!