olegatro Posted July 5, 2020 Share Posted July 5, 2020 Hello! I am trying to implement reveal of the multiple elements (stagger behavior) by scrolling. So I found this page in the docs - method batch After looking on this example See the Pen zYrxpmb by GreenSock (@GreenSock) on CodePen which has the same situation as mine (with predefined y) I am trying to implement same technique, but don't quite understand how to use refreshInit method, if we have multiple sections with different reveal behavior. P.S. sorry for my english My example See the Pen VweQzJz?editors=0010 by olegatro (@olegatro) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted July 5, 2020 Share Posted July 5, 2020 I'm not entirely sure I understand your question, but the only purpose of the "refreshInit" listener in our demo is to make the elements go back to a y of 0 when the measuring occurs for all the start/end values. When you return a GSAP tween/timeline in the "refreshInit" handler, ScrollTrigger will apply it and then automatically revert it as soon as the refresh() is done. That way, we get measurements based on y: 0, but we can have the animations start with y be something else. Does that help? 1 Link to comment Share on other sites More sharing options...
olegatro Posted July 5, 2020 Author Share Posted July 5, 2020 Yep, I think your answer would be helpful - thank you! I don't thought what we can return timeline in the refreshInit. My problem was in using refreshInit for different elements with different animation logic - and I didn't khow how to do it right Now I am thinking to try timeline.set().set().set(); Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 6, 2020 Share Posted July 6, 2020 17 hours ago, olegatro said: Now I am thinking to try timeline.set().set().set(); Chaining a lot of .set()s in a timeline is usually not the right way forward. But I'm having trouble understanding your goal and code above. Please let us know if you have more questions Link to comment Share on other sites More sharing options...
GreenSock Posted July 6, 2020 Share Posted July 6, 2020 Actually, in this case it may be exactly the right solution if his goal is to set the state of a bunch of things ONLY for the refresh calculations (and then reverted). In the upcoming release, this may be simplified to a call to ScrollTrigger.saveStyles() initially, but that may not be a perfect fit in every scenario. Link to comment Share on other sites More sharing options...
olegatro Posted July 7, 2020 Author Share Posted July 7, 2020 On 7/6/2020 at 3:51 PM, GreenSock said: Actually, in this case it may be exactly the right solution if his goal is to set the state of a bunch of things ONLY for the refresh calculations (and then reverted). In the upcoming release, this may be simplified to a call to ScrollTrigger.saveStyles() initially, but that may not be a perfect fit in every scenario. Yes! I need ONLY for refresh calculations and only once. Timeline.set().set().set() - because I have different elements with different logic for refresh calculations. Link to comment Share on other sites More sharing options...
olegatro Posted July 7, 2020 Author Share Posted July 7, 2020 const firstElementsArray = [...]; const secondElementsArray = [...]; const thirdElementsArray = [...]; gsap.set(firstElementsArray, {yPercent: 50}); gsap.set(secondElementsArray, {yPercent: 100}); gsap.set(thirdElementsArray, {yPercent: 150}); ScrollTrigger.batch(firstElementsArray, {/*...*/}); ScrollTrigger.batch(secondElementsArray, {/*...*/}); ScrollTrigger.batch(thirdElementsArray, {/*...*/}); ScrollTrigger.addEventListener('refreshInit', function () { return gsap.timeline() .set(firstElementsArray, {yPercent: 0}) .set(secondElementsArray, {yPercent: 50}) .set(thirdElementsArray, {yPercent: 100}); }); Link to comment Share on other sites More sharing options...
olegatro Posted July 7, 2020 Author Share Posted July 7, 2020 On 7/6/2020 at 3:35 PM, ZachSaucier said: Chaining a lot of .set()s in a timeline is usually not the right way forward. But I'm having trouble understanding your goal and code above. Please let us know if you have more questions I will try to explain in the another words - the problem is in detecting the right position of the scrolling trigger start, because in the initial I set yPercent. And if we do nothing with that we get wrong position of the scroll trigger position. So we need to use refreshInit callback for return yPercent as zero (or other value) for calculations. But the problem is what I have multiple batches (see example before), and I don't know how exactly using refreshInit in that situation. So after your helping, I get gsap.timeline().set().set(). Link to comment Share on other sites More sharing options...
GreenSock Posted July 7, 2020 Share Posted July 7, 2020 I wasn't quite sure - are you saying that you got it solved now or do you still need help? Link to comment Share on other sites More sharing options...
olegatro Posted July 7, 2020 Author Share Posted July 7, 2020 24 minutes ago, GreenSock said: I wasn't quite sure - are you saying that you got it solved now or do you still need help? Sorry for my replies. Yes, yes, I find solution. Thank you for helping me! I just wanted to show you my solution and problem in another words. Link to comment Share on other sites More sharing options...
GreenSock Posted July 7, 2020 Share Posted July 7, 2020 Excellent! Thanks so much for sharing. 🙌 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