Set every single panels height individually?

[MidnightSociety]

Good day, ladies and gents.

 

Newbie here. I'd like to know if it's a possibility if I can set each panel(s) height individually? On the CodePen URL all the panels are the same height. But, I want some panels to go down a bit more before they scroll horizontally to the next panel. The width isn't a problem, but would love to set each panel(s) height as I please to put more content on some of them than other. 

 

To explain a bit regarding what I want to achieve. I'm busy developing a photography site. On the intro panel I have some content that fits the normal width and height. When I scroll down vertically to my first panel, I have some "about" information and the height and width is also fine, want to keep it normal window size. Then when I scroll again it starts going horizontally to my second panel. Now here is where I want it to go down a bit more so I can fit more content like a quick portfolio for example. Then when I reach the end of that quick portfolio I want to scroll horizontally again to my third panel.

 

I tried setting the height via CSS, doesn't work. And I can see a bit of my content going downwards like I want it to, but can't scroll to it, just ignores it and goes to my next panel. 

 

How can I achieve this?

 

Sorry if there is a very simplistic solution for this that I don't know and asking a very stupid question. But, I'm still learning and would really appreciate any help. 

 

Thanks!

 

 

 

 

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

[akapowl]

 

Hello @MidnightSociety

 

If it's not logically impossible it is probably very much doable with ScrollTrigger - in fact it is, but it is not as simple as just changing the height of your sections. Since you are pinning the element for the fake-horizontal-scroll animation and you want it to scroll freely for a while you will have to first adjust the duration of that first pin and the amount of how much to translate the whole thing to the left. Then you'd have to set up another ScrollTrigger for the next pinning and translation part (taking into account the duration of the first pin depending on how you set things up).

 

Of course for the whole thing to work properly, you'd also have to make sure that the sections are positioned correctly in the first place. There is a whole lot to consider in doing layout animations like those and it is nothing that can be done in a couple of minutes (well at least for me it isn't) let alone explained.

 

I tried giving it a shot because I was interested myself - and it took me quite a while to put this (rather dirty) demo together (from a previous fake-horizontal-scroll demo).

 

Since I only have one extra section here, I could simply just set it to 'align-self: flex-end' in this setup. But I think adding in more sections will make things way more complicated in the long run - due to having to get them be positioned correctly.

 

I'm not sure this will help at all since it is rather complicated to wrap your head around - but I'll post it anyways - maybe it can serve as inspiration at least. Sorry if this isn't the reply you hoped for but I personally don't think it is that easy.

 

See the Pen 6543cb666c033988b8667a45fcc5abc9 by akapowl (@akapowl) on CodePen

 

[MidnightSociety]

@akapowl You're an absolute legend mate! That is exactly the reply I was looking for. Just wanted to know how one would go about achieving this and if it's indeed a possibility and you confirmed everything that I was curious about. You are 100% correct though, it is rather complicated and a bit too out of my coding league and also the issues that it can cause in the long run, therefore I'd rather stick to my Plan B. Regardless, thank you for all your efforts and taking the time to explain it to me. I really appreciate it mate. You're a real G.

[akapowl]

 

What you could alternatively do is sort of fake that setup to a certain extent.

 

You could have multiple fake-horizontal scrollers (with 100vh height) and split those sections of your content where you know you'd have too much for it to fit into 100vh up between seperate fake-horizontal scrollers - fit in a section in between those for which you can set whatever height you want (where the page scrolls freely vertically) and style the first and last section of these fake-horizontal-scrollers the same way as the vertical-scrolling section in between.

 

It won't give you that same amount of control over the height - since your "content-overflowing sections" would be at least 200vh in height then -  but it could work decently enough.

 

See the Pen db3949e562a675f61f4626f8b95c74d9 by akapowl (@akapowl) on CodePen

 

 

[MidnightSociety]

Mr @akapowl I seriously do not know how to thank you for the above. Just spent like an hour playing around with it and it works absolutely perfect to what I initially wanted! Thank you so much for making it so easy for me to utilize into my own version.

 

Here's my version: 

See the Pen zYZbEPE by Dihann (@Dihann) on CodePen

(Looks a bit weird small, recommend checking it out on full screen. Will fix that on my actual code.)

 

Just pure awesomeness. Absolutely love what one can do by utilizing the above. Thanks for the amazing support @akapowl

 

[akapowl]

 

My pleasure! Good to hear it works for you 👍

 

I'll also add the original demo I took as a basis for this - just in case anyone is wondering wondering why there is a ternary operator on the x-property of the tween; It's just because the original demo is fake-scrollable in left and right direction. If you only need it to be tweened in one direction you can of course trim things down a bit there.

 

Good luck with the project and happy tweening  

 

See the Pen dyvygmj by akapowl (@akapowl) on CodePen