repeatrefresh Timeline with repeatRefresh doesn't reevaluate functions in tweens

[Costco]

I'm trying to create a write on text animation that changes with each repeat of the timeline, but even though I have repeatRefresh set to true, (which should invalidate the tweens) it only repeats the same text over and over. I'm using a function in the "text" property of .vars that returns a random item from an array of strings. Am I missing something, and is it possible to achieve the effect I'm trying to with this method?

See the Pen YzwMNQR by Costco (@Costco) on CodePen

[GreenSock]

That's because you fed the RESULT of your function to the tween instead of making it a function-based value. 

 

// BAD:
text: newText(),
  
// GOOD: 
text: () => newText(),

Better yet, you can use GSAP's built-in randomizing capabilities and get rid of your newText() function altogether: 

text: gsap.utils.random(sampleTexts, true),

See https://greensock.com/docs/v3/GSAP/UtilityMethods/random()

 

Does that clear things up? 

[Costco]

Could you explain the difference between the two notations? I'm used to java and thought arrow notation was just more compact.
 

otherwise yes, and thanks so much for your help

[GreenSock]

Sure, when you do this:

let text = newText(); 

It invokes the function, grabs the result (whatever got returned from newText()) and assigns it to the variable "text". No matter how many times you reference "text" now, it isn't going to call that function again and again - it's just set to the return value. So if that function returned "sample 2", then that's what the "text" variable refers to. Period. 

 

When I do this: 

let text = () => newText();

Now the "text" variable is set to a FUNCTION. That function isn't called yet. When you call text(), that will invoke the function, and inside that function we're calling newText(), so it returns the result of that. 

 

This does the same thing, but it's more verbose: 

let text = function() {
  return newText();
}; 

So in your GSAP code...

function newText() {
  return "something";
}

gsap.to(... {
  text: newText(), // this is the same thing as...
  text: "something"
});

So it grabbed a random value, assigned it to "text" and then every time the timeline refreshed (on repeat), it used that same value. You didn't have anything dynamic in there. If you want GSAP to call that function every time, you must set text to a function. This would work too: 

text: newText, // notice there's no ()

That's a reference to the function itself. When you add "()" to the end, that tells JavaScript to invoke that function and use the result there. 

[Costco]

So it's referencing the function object itself, not calling its execution. Thanks!