One layered panel only

[dogzzz]

Hi there,

 

I want to implement pretty much exactly what is in this example ie the layered scroll, however after the first panel slides up (red) I want to continue with the normal document flow.

 

Do I have to put everything inside of the red panel for what I want afterwards is that the only way to do it? Or is there another way.

 

Also when I've been coding it myself I had to set the height of a panel to 100vh rather than 100%. I tried setting the body to 500vh but anything after will continue to layer over the previous layer. I only want this to occur for the red panel and then after that to carry on as normal.

 

For example see https://www.apple.com/uk/iphone-13-pro/ for the desired effect

 

Thank you 

 

DZ

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

[iDad5]

If I get you right, for what you are describing, you could probably work without ScrollTrigger and pure CSS, but when you present the iPhone site as your inspiration, you might look for a lot more than what you describe. 
Is that possible?

If so, I always find it helpful to get at least a somewhat clear idea of what you will need/want.

Regarding you CSS-issue, that sound's quite easy to solve, but as a competent CSS setup often helped a long way in achieving clever aminations you might try to brush up un that first. I found need help, starting slow with a CodePen usually makes it a lot easier to get help here, and don't be shy asking, we are all learning.

[akapowl]

 

Hello @dogzzz

 

43 minutes ago, dogzzz said:

I want to implement pretty much exactly what is in this example ie the layered scroll, however after the first panel slides up (red) I want to continue with the normal document flow.

Good - then you need to think about what the codepen demo does and what you need to change for it to work like you want.

 

The codepen demo pins every section without pin-spacing, so the subsequent section will overlay it when scrolling.

So if you only want the first section to be overlayed on scroll, only pin the first section.

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

 

Also, I'm not sure if you knew, but that codepen demo does load an external CSS file - as pointed to by Carl in this post recently, too.

Maybe that will help with replicating the demo for your project.
 

 

[dogzzz]

Thank you so much for your help!

[dogzzz]

Hi,

 

I have a related question;

 

I want to have text that changes opacity on scroll which I have managed to achieve BUT when I want to pin and pinSpace it so that its held on the screen until the user has finished scrolling, I'm getting some weird results (see codepen attached -- if you try uncommenting the pin and pinSpacing options). Not sure why this is the case. Is it possible to pin/pinSpace the changing opacity text so it stays on screen until the user is finished scrolling?

 

Thanks

 

Codepen here: 

See the Pen zYWWjQq by zrrrrr (@zrrrrr) on CodePen

 

[akapowl]

 

I think it's an issue with styling related to you trying to pin inside of a flex container.

 

With display: flex, padding (which is neccessary for the pin-spacing) works very different from other contexts, so you'll have to work around that.

 

But you also might want to re-think your start and end of the ST there. A start of "top bottom" with pinning on that element wouldn't make much sense, because then you would pin it when it is not even in view (when its top hits the bottom of the viewport). Also be careful about using absolute values like "600px" because those will refer to the actuall scroll-position on the page and if not used carefully might cause you to e.g. set an end that might get triggered before the actual start - it doesn't appear to be problematic in this case for now, just wanted to give you a heads up though.

 

Here are some options you have with regard to the pinning.

 

You could e.g. just pin the whole section / flex container...

 

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

 

 

...or instead set the section itself to display: block, create a flexing container inside of that section and pin that container instead.

 

But you will also have to properly adjust the settings for the height of the panel and inner to make it work as you want.

 

Hope this will help. Happy tweening and scroll responsibly!

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

 

 

[dogzzz]

Absolute legend thank you!