Jump to content


Scrolltrigger Pin with Function in End

Moderator Tag
Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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


  • Like 5
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.