overlap issue when pinSpacing false?

[Younus]

i have pin section where underneath of this section slide one by one visible on scroll , issue is when i true pinspacing lots of extra space occur and when i false pinspacing black div section overlap when i scroll on last slide , please help me with this. thanks

See the Pen XWvKjEK by adllikqv-the-typescripter (@adllikqv-the-typescripter) on CodePen.

[mvaneijgen]

Hi @Younus welcome to the forum!

 

Have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen.

 

And here an example that mixes normal scroll with the Observer plugin

See the Pen oNQPLqJ by GreenSock (@GreenSock) on CodePen.

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

Besides Mitchel's advice I think the main issue here relates to HTML/CSS and the animation/effect you're trying to achieve. This brings a question: Why are you going from height 0 to auto while you have height: 700px !important in your CSS? To be completely honest this doesn't make a lot of sense IMHO.

 

Maybe an approach like these demos can be better suited to what you're trying to achieve:

See the Pen wvYVjvb by GreenSock (@GreenSock) on CodePen.

 

See the Pen LYMbjQw by GreenSock (@GreenSock) on CodePen.

 

Also if the element you're trying to pin doesn't have the screen height you can follow the approach in these demos as well:

See the Pen qBLRzVX by GreenSock (@GreenSock) on CodePen.

 

See the Pen ZEVpqjb by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Younus]

Thanks both of you for your time. Now I face issue  pin section overlap with separator div and other div upper from pin container only in chrome it's work fine but in others like safari , firefox even incognito mode slider overlap describe in image ? Please can you share any solution 

[GSAP Helper]

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. ✅

[Younus]

Work fine in codepen. But when I integrate it with in my nextjs project I face thic issue. 

 

[GSAP Helper]

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. ✅