remove the unwanted space

[fun]

 

how can I remove the space in the bottom, I want the page end after the  last image 

 

I write this because I want the images looks like its stretch in y axis 

  .fromTo(
    ".imgs-wrapper",
    { y: "100%", scaleY: 2.4 },
    { y: "-100%", scaleY: 1 }
  );

See the Pen zYeMNWG by noX10M (@noX10M) on CodePen

[GreenSock]

It's a logic thing with how you're building it - you're animating the transforms (yPercent) of those elements so that they end up at -100% from their normal place in the document flow, so that would create that gap. 

 

A few notes: 

1. You cannot nest ScrollTriggers in tweens that are inside a timeline that also has a ScrollTrigger. It's logically impossible because their playheads cannot be going in different directions or at different rates. I pulled your pinning one out into a regular ScrollTrigger. 
2. It's almost always best to use yPercent: 100 instead of y: "100%". It gives you more flexibility to combine things. 
3. You can create a negative marginTop and then animate to yPercent: 0 so there's no gap. 

Like this: 

See the Pen bGzQWmR?editors=1010 by GreenSock (@GreenSock) on CodePen

[fun]

Thank you!