Overlapping/timeline changes the div height

[artstyle]

Hey guys!

look at the section 5 with 3 images its overlapping the section 4. why?
and why the timeline changes the div height? 

if i change s2_timeline start and end triggers to

        start: "top center",
        end: "bottom center",

the whole layout is moves out, why?

even if i fix the height of the section to 1000px it will be 1500+ px in the limeline why?

See the Pen ZEWoqga by aptypkaa (@aptypkaa) on CodePen

[akapowl]

 

 

Hey @artstyle

 

This is a whole lot of code to process through.

 

I found, that adding 

  justify-content: center;

in your CSS to '.section-wrapper .s5 .s5-wrapper'

 

and removing the 

pin: true

on your 'let s4_timeline2 = gsap.timeline ({ ... })'

 

fixes the issues you have with the content of  '.s5' overlapping the content of '.s4' when scrolling.

 

Is this, what you were referring to?

 

 

See the Pen 16dd00a1c863ebe3612b25d8d65bdc2a by akapowl (@akapowl) on CodePen

 

 

 

 

You'll notice, that since .s5 is set to height: 100vh, the content will still be overlapping on small window-sizes, because the section simply is just not high enough, to contain the images, so they flow over.

 

 

 

[artstyle]

thanks man, the problem with overlapping is solved.

but what with the question about timeline. why its changing the div height? why when i change "start" and "end" triggers the content moves out? try to change s2 timeline to

        start: "top center",
        end: "bottom center",

u can see how the moves down

[akapowl]

 

I am not sure, but I think, this might be the behaviour to be expected and it is related to the pinning.

 

If you check this pen with an imaginary section beforehand, you'll notice, that the content is being pinned in the right place:

When its top hits the center of the window.

 

See the Pen 4dedeb590437e65e6938e7a93accb4fd by akapowl (@akapowl) on CodePen

 

 

 

The very same happens without the imaginary section, only: the pin-Spacer that is being applied by ScrollTrigger, makes up for the missing space in relation to when the pinning should happen. ( This is just a vague attempt of a descripition - not an explenation at all )

 

Edit for future reference:

This is not related to pin-spacing. Setting pinSpacing to false won't change anything in cases as above. It is just the expected pin-behaviour.

 

 

 

I am not exactly sure, what it is you want to achieve. Could you try explaining, what you expect to happen?

 

 

 

 

 

[artstyle]

@akapowl

i'm trying to understand how to manipulate with dimenshions of pinned item and its triggers position

[Visual-Q]

 

5 hours ago, artstyle said:

thanks man, the problem with overlapping is solved.

but what with the question about timeline. why its changing the div height? why when i change "start" and "end" triggers the content moves out? try to change s2 timeline to

        start: "top center",
        end: "bottom center",

u can see how the moves down

 

 

The pin spacer height as well as the top position of the element it encloses appear to set the position of the target element to where the intersection point is. So start:"top center" moves the start of the element to the center of the viewport. You can see this by changing the second value to 50%( same result as center) try other values like 100px and the result is similarly predictable. 

 

This is hard to understand with respect to the description of start in the docs: 
"Describes a place on the trigger and a place on the scroller that must meet in order to start the ScrollTrigger. So, for example, "top center" means "when the top of the trigger hits the center of the scroller" 

 

It might be helpful expanding in the docs on how and why pins/pin spacers react to start this way as it doesn't seem clear why.