Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Timeline with repeatRefresh doesn't reevaluate functions in tweens

Recommended Posts

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

Link to comment
Share on other sites

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? 

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

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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

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.