Costco Posted July 26, 2020 Share Posted July 26, 2020 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 More sharing options...
GreenSock Posted July 26, 2020 Share Posted July 26, 2020 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? 2 1 Link to comment Share on other sites More sharing options...
Costco Posted July 26, 2020 Author Share Posted July 26, 2020 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 More sharing options...
GreenSock Posted July 26, 2020 Share Posted July 26, 2020 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. 3 1 Link to comment Share on other sites More sharing options...
Costco Posted July 26, 2020 Author Share Posted July 26, 2020 So it's referencing the function object itself, not calling its execution. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now