[Using of refreshInit with multiple batches]

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.

[Using of refreshInit with multiple batches]

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().

 

[Using of refreshInit with multiple batches]

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});
});

 

[Using of refreshInit with multiple batches]

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.

[Using of refreshInit with multiple batches]

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();

[Using of refreshInit with multiple batches]

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

[[SOLVED] Motion along square path]

@Carl, thank you for answer.

 

P.S. About markdown, I mean support markdown syntax on that forum. (like github issue)

[[SOLVED] Motion along square path]

@Dipscom, thank you for the answer.

My working animation will be more complex (include rounded corners, control point ect.)

The question was more theoretical, why `left: 100%` in bezier values return strange result? - Because `left: 0` recalculate in `px` not `percentage`.
(fork -

See the Pen YqrXBp) by olegatro (@olegatro) on CodePen

I think you are right, bezier path not good solution for my task. 

Offtop:
Is there a way to use markdown editor ? 

 

[[SOLVED] Motion along square path]

The problem was with `left: 0`, need specify `left: 0%`

[[SOLVED] Motion along square path]

Hi, sorry if my question not clever.

Can I using bezier path (css left, top), set square path for my dot ? 
Or how can I do motion along square path another way (with on time duration)?

The square should be responsive.
 

See the Pen WwZbRQ by olegatro (@olegatro) on CodePen