Pin Spacer has extra height to it leaving empty space at the bottom of effect

[Paper Krane]

Hey everyone!

 

I have seen this card scrolling effect on numerous websites and went to test my hand at it on a Nuxt.js app and noticed I was getting a strange gap at the bottom of the pin spacer. I then tried to set the pinSpacer to false and then the effect didn't work properly there either. I would appreciate an extra pair of eyes here to see when I am missing as it feels so close to being complete! It's just this strange gapping. Thanks everyone and thank you for GSAP! This has been a game changer for me!

 

* The codepen looks best with the code windows on the side since I am using VH units to  size the effect.

See the Pen GRzXqjG by paperkrane (@paperkrane) on CodePen

[mvaneijgen]

I always like to turn on markers and if I have this many ScrollTriggers give them distinct id's, so that you can really see what is what. Then it is just a question of seeing what they are doing and when you like them to stop. In this case you want them to stop when the bottom of you last item (now hard coded, you probably want to get that dynamically), hits the same location as the end of that element. 

 

Hope it helps and happy tweening! 

 

See the Pen eYxPdqM?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Paper Krane]

17 minutes ago, mvaneijgen said:

In this case you want them to stop when the bottom of you last item (now hard coded, you probably want to get that dynamically), hits the same location as the end of that element.

 

I can't believe I missed the 'endTrigger' property! For some reason I had it stuck in my head that the trigger was kind f the end all be all of sizing the spacer. Thank you so much for this!