Jump to content


ScrollTrigger pinned elements not recalculating start on window resize

Go to solution Solved by akapowl,

Recommended Posts



I'm sure this will be something fairly straightforward that I've missed but have come up against it a couple of times before.

I'm pinning elements on scroll but on window resize the start triggers aren't recalculated to the new screen dimensions so end up off screen/overlapping with other pins.


Any thoughts?


Thanks in advance



See the Pen gOjeWYq by Cottonltd (@Cottonltd) on CodePen

Link to comment
Share on other sites



That is the case, because you populate your variables with the relevant values once on load, and then always work with the same variables without ever updating their values.


If you want things to be recalculated on resize, you will need to get the relevant values again on resize (best on the revert event of ScrollTrigger) and repopulate your variables.


Here's an example for that - although I'm not sure this is what you really want as those values for the start can become (or in some cases depending on window/image size already are) contradicting to the end of 'bottom bottom' you have there, which will be reached before the start in a vast majority of cases, the way I see it.


So maybe explain what it is you are trying to achieve, and we can see if there is a better way to do it !?


See the Pen VwBXWOm by akapowl (@akapowl) on CodePen


  • Like 2
Link to comment
Share on other sites

Thanks @akapowl,


Essentially I'm trying to get the subtitle to pin to the top, then the intro copy to pin 32px under it and both stay pinned until the end of that section hits bottom (or the start of the next section comes into view). The subtitle is dynamic so that's why that height is being calculated, to ensure the intro is always 32px below the height of it.


I actually had the recalculations being done in the 'live' version inside a window.resize function but had commented it out. The revert() seems to do the job I just need to add that if the copy content is larger than the height of the image column, or window, it should continue to scroll, or change the grid sizing.

Link to comment
Share on other sites

  • Solution


Alright, I see. Then you'll probably need some sort of calculation anyway.


Just for inspiration, here is an alternative. I make use of the endTrigger here, so I can use one trigger-element for the start and another trigger-element for the end. Also I get the values directly in the start function, so there's no need to re-populate any variable on resize. The calculation there is based on the padding of the section plus the offsetHeight of the subtitle + the 32px you mentioned you wanted in between the pinned elements.


As a sidenote: I had to add a fixed height to the h2, as your h2s are empty and things got a bit wonky when pinning the intro element.


Maybe this will help somehow.


See the Pen gOjzmmX by akapowl (@akapowl) on CodePen




endTrigger 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.
  • Like 2
Link to comment
Share on other sites

Oh lovely, thanks @akapowl. Endtrigger is a great shout.

Missed the H2 when I ported it over to codepen from the WP build, sorry about that.

  • Like 1
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.