onUpdate - dynamically detecting a variable change on a click event

[bromel]

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

[Rodrigo]

Hi,

 

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!

[GreenSock]

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. 

[bromel]

@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

 

Bromel

[GreenSock]

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() {
  tl.pause();
  // do your stuff...
}

Have fun!