Reusable anime instance for different onUpdate() functions

[monolithMktg]

I have a bunch of transitions that I want to use a single re-sable 'bell curve' anime instance for. this.x.value goes from 0 to 1 and back to 0:

        this.transition= animate(this.x, {
            value: [0,1,0],
            autoplay: false,
            onUpdate: () => {
                if(this.vars.x.value > 0.95 ){
                     if(var1) do this
                     if(var2) do this
                     if(var3) do this...
                }
            }            
        })

Is it possible to call this.transition and pass in some identifier variable (var1, var2, var3...) that triggers the correct behavior on update?

Thanks.

[stanleys12]

Yes. Anime does not take arguments when you play an instance, but you don't need that. The callback is just a function, so you can have it read a variable that you change before each play.

this.mode = null;

this.transition = animate(this.x, {
  value: [0, 1, 0],
  autoplay: false,
  onUpdate: () => {
    if (this.x.value > 0.95) {
      if (this.mode === 'var1') { /* do this */ }
      if (this.mode === 'var2') { /* do this */ }
    }
  }
});

// later
this.mode = 'var2';
this.transition.restart();

If you'd rather keep one handler per behaviour, keep a map of handlers and look one up inside onUpdate:

const handlers = { var1: () => {}, var2: () => {}, var3: () => {} };
onUpdate: () => { if (this.x.value > 0.95) handlers[this.mode]?.(); }

You can also swap the callback itself. The instance stores it as a plain onUpdate property (set in the Timer constructor), and the render loop calls tickable.onUpdate(...) each time it renders, so reassigning it takes effect on the next frame:

this.transition.onUpdate = () => { /* behaviour for var2 */ };
this.transition.restart();

The first option is the safest, since it relies only on the public options.

If you want a fresh instance per use instead, wrap animate() in a function that takes the identifier and returns the animation.

(I looked this up in the code with help from an AI assistant; the links are to the lines I checked.)

[monolithMktg]

Thanks a lot, man!