How do I interrupt the current animation? and add a new animation when interrupted?

[Gerg Person]

I am making a piano visualizer.  When I press my piano key the corresponding ball goes up because the noteOn function fires.  It's quite a long animation if you hold the key in.  But I want noteOff to fire if I let go of the key.

 

I added the onInterrupt but I'm not actually interrupting it, I think.

 

So how do I interrupt the animation playing in noteOn? ... and replace it with the animation in noteOff when I let go of the key?

 

Thanks

[Rodrigo]

Hi

 

The onInterrupt callback is triggered when you kill an instance 

https://gsap.com/docs/v3/GSAP/Timeline/kill()

In this case you're just adding new instances to the same timeline.

 

Based on the description you have maybe a better approach could be to store the timeline in a variable and if you press another key reverse the timeline and then create a new timeline when the reverse is completed.

 

Another option could be to kill the timeline, create a new animation that moves the note to it's original position and at the same time create the timeline again for the new note so both animations happen at the same time but at different speeds.

 

Lots of options as you can see. If you need more help please create a minimal demo that clearly illustrates what you're trying to achieve.

 

Happy Tweening!