Jump to content
Search Community

Using of refreshInit with multiple batches

olegatro test
Moderator Tag

Recommended Posts

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

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? 

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

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

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

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.
×
×
  • Create New...