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

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. 🙏🏼

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

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.

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

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

[Scrolltrigger pinned element gets height:0 and max-height:0]

Oops. That was not my intention! Ill move it to the main forum.

Thank you.

[Scrolltrigger pinned element gets height:0 and max-height:0]

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?


 

[0 is not quite 0]

Hi there!

 

Thanks for the replies. Solved!

My animations work more predictable now!

[0 is not quite 0]

Hi there,

Is there anyone who can tell me why animating  a property to 0 ,doesn't get to 0?

I have a text 115% offscreen. I want to animate it to 0, so it can get to its intended position.

 

Thanks!

 

screenshot 

 

example code:

    tl.fromTo( el.current, {

      duration: 3,

      ease: "linear",

      x: "115%",

    },

    {

      x: "0%",

    }

    )

[TypeError: Cannot add property _gsap, object is not extensible]

@Cassie
lol I spent more than 2 hours to come and find out that....... I forgot the .current on the scroller and trigger. 
wow this is ridiculous 🙃🤣

thanks cassie!

[TypeError: Cannot add property _gsap, object is not extensible]

Unfortunately no luck. I studied the codes, refactor my code and did all sort of things.

 

Thanks though! 

[TypeError: Cannot add property _gsap, object is not extensible]

Hi there,

 

I have searched all over the internet for hours without any luck.

My guess is it has something to do with the gsap.registerPlugin(ScrollTrigger)

I have attached some screenshots. I would appreciate any help.

Thank you!