Michael31 Posted October 21, 2021 Share Posted October 21, 2021 Hello everyone, I'm super glad to work with scrollTrigger, it's a very powerful tool. On the other hand, I can't manage a situation : In a modular page I might have several parts with an horizontal scroll. In order to animate these parts I'm doing this (and it works like a charm) : // each time there an horizontal scroll document.querySelectorAll('.carousel').forEach(carou => { // calculating the width of the section const translate = carou.querySelector('.innerCarou').clientWidth - window.innerWidth; gsap.to(carou.querySelector('.innerCarou'), { x: -1 * translate + 'px', ease:"power1.inOut", scrollTrigger: { trigger: carou, start: 'top top', end: '+=' + translate + 'px', pin: true, scrub: true } }) }) But it happens that the width of my horizontal scroll changes. So I'm calling the ScrollTrigger.refresh() method to update all my scrollTriggers. Unfortunately, my variable translate is not updated so my gsap is not correctly working. How can I manage to update both my gsap and its variables ? Thanks a lot Link to comment Share on other sites More sharing options...
akapowl Posted October 21, 2021 Share Posted October 21, 2021 Hey @Michael31 You'll want to use invalidateOnRefresh: true on your ScrollTrigger alongside functional-values. This is an example of mine that shows how you could do it - check getToValue() Hope it helps. See the Pen dyvygmj by akapowl (@akapowl) on CodePen 1 Link to comment Share on other sites More sharing options...
Michael31 Posted October 21, 2021 Author Share Posted October 21, 2021 Damn it looks cool ! So basically, when the ScrollTrigger.refresh() method is called, the getToValue() function is called too so the x: value is recalculated right ? And this won't be possible without the invalidateOnRefresh attribute set to true, double right ? I'm amazed with this solution, I'm gonna try it. Link to comment Share on other sites More sharing options...
akapowl Posted October 21, 2021 Share Posted October 21, 2021 19 hours ago, Michael31 said: So basically, when the ScrollTrigger.refresh() method is called, the getToValue() function is called too so the x: value is recalculated right ? 19 hours ago, Michael31 said: And this won't be possible without the invalidateOnRefresh attribute set to true, double right ? Right and right; The invalidateOnRefresh makes sure the old values for the animation get flushed (invalidated) in the first place Just storing the values in a variable beforehand, would only populate it once on load though, so even if you had invalidateOnRefresh set to true but would just refer to that variable (even if you make the x-property a functional-value), ScrollTrigger would still be working with the old values. If you make it a function it can be called on every refresh and will get the fresh values then. The way I understand it, technically it would probably be more like the x-property function(al-value) calling the other function, so invalidateOnRefresh and the functional-value are what's most important here. For example, as long as you used invalidateOnRefresh and a functional-value for the x-translate, you could also just feed the x-property-functional value directly with the values it is supposed to get from scratch, like in the example below. Hope that doesn't confuse more than it clears things up 😅 See the Pen 7b10f3289b093af69db4b9f2fa11b07d by akapowl (@akapowl) on CodePen 5 Link to comment Share on other sites More sharing options...
Michael31 Posted October 21, 2021 Author Share Posted October 21, 2021 I got it ! I learnt a lot here. Thank you very very much for your time and your precious explanations 💥 2 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