Jump to content
GreenSock

DabeDotCom

Having Trouble Understanding `invalidate()` w/ Repeat

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

 

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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?

  • Haha 1
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

 

  • Like 3
Link to comment
Share on other sites

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!

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.
×