Help understanding horizontal pinning

[christianpugliese]

What I'm trying:
Title 1 and Title 2 are pinned to the right

As sec 1 scrolls in Title 1 follows it and then stays pinned to the left as sec1 scrolls out

Title 2 stays pinned to the right until sec2 enters the viewport and then stays pinned to the left+100px as sec2 scrolls out

 

I was trying to get the same as here but horizontal.

See the Pen 9e7bf431223f98516c0431cfdefb6e3f by GreenSock (@GreenSock) on CodePen

See the Pen xxEgBEz by christianpugliese (@christianpugliese) on CodePen

[akapowl]

 

Hey @christianpugliese

 

the setup in your demo is actually a bit different from the setup in the demo you refer to - also, you appear to have a </div> closing tag too much in your HTML-Markup. Also, I am not sure, you really truly understand how the start and end work.

 

In 

 

start: 'left right'

 

for example, the first value (here left) refers to the left side of your trigger element and the second value (here right) refers to the right edge of the scroller.

So the pin would start when the left side of the elemnt hits the right side of the scroller.

 

Thus your end of 'right left' won't really work, because it would be supposed to end when the right side of your element hits the left edge of the scroller.

And to be honest, I am not sure, why in your example that first title would even pin at all. I would suggest, you give the docs a good read with regard to pinning.

 

That being said, here is a demo of how it could work - but note, that this is not a solution to getting the setup to exactly to what it is like in the demo you referred to - just an example for the pinning in general.

 

I put the titles inside each of your .secs, positioned absolute to the left side of each .sec, and added a margin-left to the sec-body, so it would not be hidden by the titles.

 

For the ScrollTriggers, I'd suggest looping through all the titles, something like this

 

const allTitles = gsap.utils.toArray('.title')

allTitles.forEach((title, i) => {
	
 ScrollTrigger.create({
		trigger: title,
		start: "left left+=" + title.offsetWidth * i,
		endTrigger: ".container",
		end: "right right",
		pin: true,
		horizontal: true,
		pinSpacing: false,
		markers: true,
		scroller: "#scroller"
 });

});

 

For each of the created triggers, the respective title is the trigger-element.

 

With the start set up like this, it will pin, when the left side of the title hits the left side of the scroller plus the width of the element multiplied by the index of the title. Note, that this will only work if all titles have the same width - if they had a different width, you would have to apply some logic to get the width of all previous title elements and set the start according to that instead.

 

In this case I set the endTrigger to the container and the end accordingly, so it will stay pinned for the whole scroll-duration.

 

See the Pen 6866d74de106dd4fc8722a8fd38f758c by akapowl (@akapowl) on CodePen

 

 

I hope this demo at least helps you get a better understaning with regard to how the pinning works.

 

Cheers,

Paul