Scrolltrigger Pin with Function in End

[bartmc 6 Likes (Newbie)]

I've attached a simple pen below.  The basic idea is that I’m pinning an image in a column on the left, while some copy scrolls by on the right. I'd like to set the pin end point with a function, something like “end the pin when the bottom of the trigger element reaches 'the top of the window + the current height of the image'. Now it's just set to end: "bottom top+=300" for this demo, but if the viewport is a different size and/or shape, or if the designer changes the image size, the pin end won't align properly.

 

Any help much appreciated!

 

See the Pen rNYYVaG by bartmc (@bartmc) on CodePen

[OSUblake 18,533 Likes (Superhero)]

Hi bartmc,

 

You should use invalidateOnRefresh and function based values for anything that needs to be recalculated.

 

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

 

[bartmc 6 Likes (Newbie)]

Works perfectly, thank you! It's also blindingly simple. Thank you so much.