[Having Trouble Understanding `invalidate()` w/ Repeat]

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!

[Repeating timeline without going back to initial position]

[I know this is an old topic, but it was one of the top hits on Google when I searched for gsap repeat timeline, so I'm adding a link here in case anybody else (including "Future Me") stumbles upon it again....  «grin»]

 

GSAP 3 has added the repeatRefresh: true feature to simplify/fix this:

 

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

 

PS — Big thanks to @OSUblake for helping me figure it out! 🤩

[Having Trouble Understanding `invalidate()` w/ Repeat]

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?

[Having Trouble Understanding `invalidate()` w/ Repeat]

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