Basic Pin

You can pin an element while the ScrollTrigger is active which basically make it stick in place while the scroll position is between the start and end elements/values

start: "top top" triggers when the orange element’s top edge hits the top of the viewport. end: "bottom 150px" stops pinning when the bottom of the orange element hits 150px down from the top of the viewport (measurements are relative to the top).

start: "top center" pins this element when the top of the red element hits the center of the viewport, and remains pinned for 200px because its end is defined as "+=200"

Easy Peasy!