Jump to content


onUpdate - dynamically detecting a variable change on a click event

Moderator Tag
Go to solution Solved by Rodrigo,

Recommended Posts

Good evening All

It has been a long time since I have been here in this amazing forum, with you amazing people, I actual thought I was done with the GSAP lifestyle

but NOOOO!!! the call was too great, Anyways I have come back to  version 3.11.5  which seems very impressive.


So I am learning again and I am trying to use the 'onUpdate' parameter in a tween.


The issues that I am having is that I want to change the value of a variable by button click, which I can do. It seems to be that during the animation the instance of the variable does not change. but it is clear that it has change during the pressing of the button.


Im guessing that it is my application that is at fault, so any help, tips, or pointers would be very appreciated.


P.S It's good to be back!!! 😀

See the Pen ZEqrbVq?editors=1111 by w9914420 (@w9914420) on CodePen

Link to comment
Share on other sites

  • Solution



the issue could be the fact that you’re using a reference in your update method.


This seems to work the way you intend


tl.to(spinner, {
  duration: 1, 
  rotate: 360, 
  repeat: 23,
  onUpdate: () => onCallback(test),

Hopefully this helps.

Happy Tweening!

  • Thanks 1
Link to comment
Share on other sites

First of all, welcome back, @bromel :)


Yeah, that's just a JavaScript thing. When you did this: 

let test = false;

onUpdateParams: [test]

The way JavaScript works literally drops in whatever value test represents into that Array. You seem to be under the impression that it stays just a variable reference...as if it's passing a dynamic value itself into the Array (and that it stays dynamic). In other words, it was equivalent to doing this: 

onUpdateParams: [false]

@Rodrigo's approach is correct because it is using that test variable itself...whatever it is at that time. Again, none of this has anything to do with GSAP. For example: 

let test = false;
let myArray = [test];
test = true;
console.log(myArray[0]); // false

Just for the record, it looks pretty odd to me that you're using an onUpdate to check a variable and then pause the animation whose onUpdate that is. That smells like possibly an engineering problem. Why not just pause() the timeline wherever you set that variable? Or create a method that you call which does both? It's often wasteful to run logic on every single tick like that. 

  • Thanks 1
Link to comment
Share on other sites

@GreenSock Hi Jack,


Been a long time, hope you doing well! 😀


Thank you very much for the explanation into what was going off, my javascript knowledge has regressed somewhat over the years, so Im just starting again from scratch.


So in regards to this particular use case I best explain its purpose.


1. I have a submissions form on a website that will be used to submit personal details to a private server.

2. When the user submits, I make a request to the server and wait for a response, during this time we have a spinner (like in my demo)

3. The variable represents the response so, my intention is that when I get the correct response, I can stop the animation and show another, depending on the type of response that I get.


I hope this makes sense.


p.s If there is a more performant way of doing this, please feel free to show 


Many thanks again



Link to comment
Share on other sites

Yeah, it'd definitely be better to just handle that in the response. I imagine you'll have some kind of handler for the response...

function onResponse() {
  // do your stuff...

Have fun!

  • Like 2
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.