horizontal layer pin

[Sukru]

Hello, I have two problems with horizontal pin scroll. First of all, the atrium is now in place and as it should be, but when the atrium is done, it should be attached to the left, I could not achieve this. The second problem is that the width of the next panel must be 100%. Can you help me with this?
I tried to explain what I actually mean in the example image.

 

See the Pen OJddbMY by sukruemanet (@sukruemanet) on CodePen

[Rodrigo]

Hi,

 

I'm not 100% sure of what you're trying to achieve so I took my best guess and came up with this:

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

 

Unfortunately I don't have time right now to dig into all your code and make it look like this, but I do believe your setup is far too convoluted IMHO.

 

Hopefully this helps.

Happy Tweening!

[Sukru]

@Rodrigo What I actually want to do is to place the .horizontal-item divs side by side in the first div with an offset and expand the content area as you scroll. In the example I made, they actually come next to each other, but there is no content expansion. There is a similar example here.
https://www.brooklyneditions.com/ "Services designed to meet the needs of professionals" section. 

[Rodrigo]

Hi,

 

I believe that this is more related to the initial HTML/CSS setup rather than a GSAP issue to be honest. I would strongly recommend you to completely remove GSAP altogether and focus just on the HTML/CSS, then create a Tween/Timeline that actually does what you're looking for. When you have an animation that actually works the way you intend, plug ScrollTrigger into it.

 

I updated the codepen demo from my previous post so it works in the way the URL you linked does:

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

 

Unfortunately we don't have the time resources to create/fix HTML/CSS structures for our users in these free forums. We have to keep our focus in GSAP related issues.

 

Hopefully this helps.

Happy Tweening!

[Sukru]

Hello @Rodrigo  With your example, I made my own vertical info section. Actually, the only thing I want to do here is for all the info sections below to appear first and for the content to appear when the order comes.

See the Pen qBgzLze by sukruemanet (@sukruemanet) on CodePen

[Rodrigo]

Hi,

 

There is no content in your demo, so I'm not sure what you mean by that. My best guess is that you're looking for something similar to what is discussed in this thread:

 

Happy Tweening!