Using ScrollTrigger Empty white space below div

[DavidRiches]

Hello, Working on a pen atm using scrolltrigger... I'm seeing a white space beneath the "grand-carousel-container". I think my math logic is not quite correct using the "yPercent" option?

 

Any help would be appreciated. Thanks

See the Pen NWyeeoz by bigdave2uk (@bigdave2uk) on CodePen

[akapowl]

 

Hello @DavidRiches

 

I think it is more of a styling issue. Your slides are just adding to the height of the container and since you are then tweening them upwards what you will see in the end ist just all that white space where earlier the slides would have been on the right side. 

 

Suggestion: Remove the flex on your .timeline-slides and add a height of 100vh and overflow: hidden

 

.timeline-slides {
  // display: flex;
  // flex-direction: column;
  width: 50vw;
  height: 100vh;
  overflow: hidden;
}

 

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

[DavidRiches]

Excellent, thankyou @akapowl