Having Trouble Understanding `invalidate()` w/ Repeat

[DabeDotCom]

Hi!  Forgive me for being a first-timer, but I'm having difficulty wrapping my head around why the attached CodePen doesn't "zig-zag" my squares correctly...  (Note: This is a Minimal Reproducible Example; please don't judge me, hehe!)

I want it to go:

     0
    /
   1 - 2
      /
     3
    /
   1 - 2
      /
     3
    /
   1 - 2
      /
     3

... but it keeps jumping back up and to the left.  ?

I did find the following Top Hit On Google, which is what I figured I needed to "repeat" from the ending position, but I don't seem to be having any luck getting it to Do What I Mean:

I'm sure you all will probably take one look and see that I'm missing something fundamental — and that's okay; I'm eager to learn more...  «grin»

Cheers!

See the Pen JjMdQvV by DabeDotCom (@DabeDotCom) on CodePen.

[OSUblake]

Welcome to the forums @DabeDotCom

 

I think what you're looking for is repeatRefresh ?

 

Quote

Setting repeatRefresh: true causes a repeating timeline to invalidate() all of its child tweens and re-record their starting/ending values internally on each full iteration (not including yoyo's). This is useful when you use dynamic values (relative, random, or function-based). For example, x: "random(-100, 100)" would get a new random x value on each repeat. duration, delay, and stagger do NOT refresh.

 

See the Pen XWVmWbZ by GreenSock (@GreenSock) on CodePen.

 

 

 

[DabeDotCom]

8 hours ago, OSUblake said:

I think what you're looking for is repeatRefresh ?

 

What's the Emoji for a band of angels triumphantly singing, "Aaaaaaaah!!!"  ?

Cheers, @OSUblake !  ?

 

PS — Is there a good place to learn/read more about what was going on, and why?

[OSUblake]

1 hour ago, DabeDotCom said:

PS — Is there a good place to learn/read more about what was going on, and why?

 

You were on the right track, but the invalidate behavior changed a bit from older versions of GSAP, which is what that thread you linked to was using. I can't think of any good resources on this subject at the moment, unless maybe @Carl has something. But in general, repeatRefresh is probably what you are looking for if you want to something to recalculate on repeat.

 

[OSUblake]

And a use case for invalidate might be if you want to recalculate certain values, like say on resize. I'm using a function based value here to get the x position, which will be called again when I invalidate the animation on resize.

 

See the Pen vYpNeRa by GreenSock (@GreenSock) on CodePen.

 

[DabeDotCom]

25 minutes ago, OSUblake said:

And use case for invalidate might be if you want to recalculate certain values, like say on resize. I'm using a function based value here to get the x position, which will be called again when I invalidate the animation.

 

Neat!