ScrollTrigger pin to middle of container and end when scroll gets towards bottom

[narlie]

so in this example here https://stackblitz.com/edit/vitejs-vite-gqbqex?file=src%2Findex.css,src%2FApp.jsx,vite.config.js&terminal=dev I have card pinnings that have `end: max`. This makes it scroll all the way to the bottom and in my website sit behind the footer. How do I end the scroll trigger towards the end of its container so it doesn't finish all the way to the bottom. Using `bottom bottom` doesn't work as it is of the item, not the container. 

 

End result wanted: What implementation to stop the scroll trigger and pins within center of its container and not go all the way to the bottom.

[mvaneijgen]

I'm not sure what it is you want, but I think you're looking for endTrigger: ".myElm", change .myElm to the element you wan to use as your end trigger (in your case footer?) and then you can tell it to stop when the top of that element hits the bottom of the browser, eg end "top bottom". 

 

From the docs on endTrigger https://greensock.com/docs/v3/Plugins/ScrollTrigger

Quote

String | Element - The element (or selector text for the element) whose position in the normal document flow is used for calculating where the ScrollTrigger ends. You don't need to define an endTrigger unless it's DIFFERENT than the trigger element because that's the default.

 

[narlie]

that worked, amazing! thanks for the suggestion