Gsap 3 Panels Ovelapping next section

[Dj.Sunrise]

Hi. I'm fighting with this issue 2 years ) Could someone please help?

I need to implement multiply pinned  sections one by one. The last one is overlapping next static section.

The website: https://luminsmart.com

Screenshot attached.

 

I've asked before same question and Cassie Admin sent me this topic 

 

that Scrips from topic above doesnt work for me because of this line of code highlighted with red color

  pin: i === panels.length -1 ? false : true,

Then a did for each section own srolltrigger .

 

                    //
                    // PINNED SECTIONS
                    //
                    ScrollTrigger.create({
                        trigger: '#presentation-1',
                        start: 'top top',

                        pin: '#presentation-1',
                        pinSpacing: false,
                    });

                    ScrollTrigger.create({
                        trigger: '#presentation-2',
                        start: 'top top',

                        pin: '#presentation-2',
                        pinSpacing: false
                    });

                    ScrollTrigger.create({
                        trigger: '#presentation-3',

                        pin: '#presentation-3',
                        pinSpacing: false
                    });

                    ScrollTrigger.create({
                        trigger: '#presentation-4',
                        start: 'top top',
                        end: "bottom bottom",
                        pin: '#presentation-4',
                        pinSpacing: false,
                        markers: false,
                    });

 

A bit later a fixed it with setting to last section hard code to avoid overlapping:

.example__item:last-child {
    max-height: none !important;
    height: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
}

It seems to work but 50/50. When page it still loading and you go down it's overlapping, if you wait for a loading finishes that last section not overlapping. 

 

I dont have CODEPEN because in codepen everything always works ok) But in real website...

Please, I need help :)

 

 

 

[OSUblake]

Hi Dj,

 

We can't troubleshoot a live site for you, so we need some sort of demo that we can interact with and test. If it works CodePen, then there might be something else interfering with it, like maybe or another JavaScript library or some CSS.

 

2 hours ago, Dj.Sunrise said:

that Scrips from topic above doesnt work for me because of this line of code highlighted with red color

  pin: i === panels.length -1 ? false : true,

 

That's not valid unless the i is coming from a loop. You would need to use a function like this...

pin: (i) => i !== panels.length - 1,

 

That's why is super important to provide a demo so we can see everything in context. Posting code snippets is almost always meaningless as there are a bunch of other factors involved, like your HTML, CSS, and other code.

 

[Dj.Sunrise]

6 hours ago, OSUblake said:

Hi Dj,

 

We can't troubleshoot a live site for you, so we need some sort of demo that we can interact with and test. If it works CodePen, then there might be something else interfering with it, like maybe or another JavaScript library or some CSS.

 

 

That's not valid unless the i is coming from a loop. You would need to use a function like this...

pin: (i) => i !== panels.length - 1,

 

That's why is super important to provide a demo so we can see everything in context. Posting code snippets is almost always meaningless as there are a bunch of other factors involved, like your HTML, CSS, and other code.

 

 

 

I Found the issue. Gsap Pin Spacing doesnt work with IMAGE tag. It works ok with Simple div sections. I tried wrap image with div also doesnt work. Look like GSAP cant calculate the height of image correctly

[GreenSock]

4 hours ago, Dj.Sunrise said:

I Found the issue. Gsap Pin Spacing doesnt work with IMAGE tag. It works ok with Simple div sections. I tried wrap image with div also doesnt work. Look like GSAP cant calculate the height of image correctly

 

That doesn't sound right to me - can you please provide a minimal demo showing it mishandling things? I don't understand why you think GSAP can't calculate the height of an image correctly. Are you sure the image is loaded at that point? Obviously GSAP can't measure the height of something that doesn't exist yet (but you can set a height on the element via CSS and that should work just fine).