Scrolltrigger layer pinning from bottom - pinned element gets height:0 and max-height:0

[curajuice]

Hi there!

 

This is more a question than an ask-for-help post.
Is there anyone who knows and can confirm if this is a normal behavior or not?

Basically, I am using scrolltrigger to create a stacked card effect.
The only thing is I noticed that the pinned element which is the <main></main> tag gets a height and max-height of 0.

the content of the <main> is still visible.

 

And I know that the pin-spacer added those properties to the <main> but why 0? The <main> should keep its height right?

 

Update:

Another question. When you have sections that have different height like that, the long sections will scroll much faster, and on mobile way to fast. is there anyway I can control that?

 

I appreciate the help.

 

 

See the Pen KKYWMKj by curajuice (@curajuice) on CodePen

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[GreenSock]

Yeah, it's super hard to troubleshoot a live site - a minimal demo like in CodePen or Stackblitz is best. My guess is that even if you completely remove ScrollTrigger from the equation, crack open Dev Tools and you'll see that the computed height of that <main> element is indeed 0. The visible content may just be due to the fact that overflow is visible on that element. In short, I bet the issue has nothing to do with ScrollTrigger, but it's in your CSS/layout. Once you post a minimal demo for us to investigate, we'll be able to advise further. 

[curajuice]

I understand that. Here I have a codepen example with the same behavior. As you can see, the .wrapper which is the trigger element that gets pinned gets a height and max height of 0.  Overwriting it won't work and because of that behavior, I am not able to give each section a min-height: 100vh.

Another question. When you have sections that have different height like that, the long sections will scroll much faster, and on mobile way to fast. is there anyway I can control that?

 

I appreciate the help.

[Rodrigo]

3 hours ago, curajuice said:

I understand that. Here I have a codepen example with the same behavior. As you can see, the .wrapper which is the trigger element that gets pinned gets a height and max height of 0.  Overwriting it won't work and because of that behavior, I am not able to give each section a min-height: 100vh.

As Jack mentions this is related to the way you're handling your layout here:

gsap.set(".panel", {
  zIndex: (i, target, targets) => targets.length - i,
  position: "absolute",
  width: "100%",
  minHeight: "100%"
});

Basically that removes every panel from the flow of it's parent element, then ScrollTrigger makes the calculations and sees that the element's height is zero. If you comment out the ScrollTrigger part from your demo you'll get the same result. So as mentioned before this has nothing to do with ScrollTrigger, just the way things work in HTML/CSS with positioning.

3 hours ago, curajuice said:

Another question. When you have sections that have different height like that, the long sections will scroll much faster, and on mobile way to fast. is there anyway I can control that?

That's because you're creating a single instance that handles all the sections with the same duration and stagger value. You need to factor the duration of each tween based  on the height of each section and the smallest section you have. Something like this:

const footerHeight = footer.offsetHeight;
const panels = gsap.utils.toArray(".panel");
let min;
let mainSectionSum = 0;
const heights = panels.map((panel) => {
  const height = panel.offsetHeight;
  min = min ? (height < min ? height : min) : height;
  mainSectionSum += height;
  return height;
});

const tl = gsap.timeline();
panels.forEach((panel, i) => {
  tl.to(panel, {
    yPercent: -100,
    ease: "none",
    duration: heights[i] / min
  });
});

Here is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!

[curajuice]

20 hours ago, Rodrigo said:

As Jack mentions this is related to the way you're handling your layout here:

gsap.set(".panel", {
  zIndex: (i, target, targets) => targets.length - i,
  position: "absolute",
  width: "100%",
  minHeight: "100%"
});

Basically that removes every panel from the flow of it's parent element, then ScrollTrigger makes the calculations and sees that the element's height is zero. If you comment out the ScrollTrigger part from your demo you'll get the same result. So as mentioned before this has nothing to do with ScrollTrigger, just the way things work in HTML/CSS with positioning.

That's because you're creating a single instance that handles all the sections with the same duration and stagger value. You need to factor the duration of each tween based  on the height of each section and the smallest section you have. Something like this:

const footerHeight = footer.offsetHeight;
const panels = gsap.utils.toArray(".panel");
let min;
let mainSectionSum = 0;
const heights = panels.map((panel) => {
  const height = panel.offsetHeight;
  min = min ? (height < min ? height : min) : height;
  mainSectionSum += height;
  return height;
});

const tl = gsap.timeline();
panels.forEach((panel, i) => {
  tl.to(panel, {
    yPercent: -100,
    ease: "none",
    duration: heights[i] / min
  });
});

Here is a fork of your demo:

 

 

 

Hopefully this helps.

Happy Tweening!

Thank you very much Rodrigo! It works great now, and I learned a couple of things new. 🙏🏼