cotton Posted January 24, 2023 Share Posted January 24, 2023 Hello 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 More sharing options...
akapowl Posted January 24, 2023 Share Posted January 24, 2023 Hello. 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 2 Link to comment Share on other sites More sharing options...
cotton Posted January 25, 2023 Author Share Posted January 25, 2023 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 More sharing options...
Solution akapowl Posted January 25, 2023 Solution Share Posted January 25, 2023 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. 2 Link to comment Share on other sites More sharing options...
cotton Posted January 25, 2023 Author Share Posted January 25, 2023 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now