Fixed/sticky hero image under fixed navbar

[JaredD]

Running into issues here with understanding how to accomplish the following:
Have a navbar that is always visible and fixed to the top of the screen. On some content sections have a hero type image that will start off large 400 pixel tall. As the content scrolls that hero image section shrinks down using scrolltrigger to 140px and sticks to the top of the page. But running into a couple of issues with getting this to work as I want things are shifted around and when the scrolling ends the hero sections goes back to its original size

See the Pen GRxXeXw by obiyoda (@obiyoda) on CodePen

[GreenSock]

Yeah, pinning requires managing the height/width (and other properties) of the pinned element, thus you're messing with that by making the animation affect the pinned element's height. It's almost always best to use a wrapper element as the pin and then animate the inner element. Like this:

See the Pen VwXEmxa by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for?