Changing state directly from JavaScript?

After some more digging into Storyline's states-approach i discovered that SL handles states different depending on the amount of images used. As seen in a post above for only 2 images it creates 2 hidden Divs and toggles those. If it would handle it the same for multiple images, my approach above would work and then you could control any amount of states. But it handles multiple images differently. When more then 1 image there is only 1 SVG and the source image for that SVG is replaced by an png/jpg when switching states. Thus having multiple scenarios for states makes it really hard to script that consistently with Javascript.

Thus said i switched the approach, and found a well working solution.

Enter: the sprite and clippath approach...
In this sample below there is only 1 image... a large png, visible at start. When you click any of the state buttons the state is scripted. What happens is that with Javascripted the DIV gets masked with a clippath and then the complete DIV gets moved so it stays more or less in position. Ideally i would use background-position to move the image but it doesnot work ( yet )

State like setup

For now this is a nice solution to get a state-like setup that you can script with Javascript.

As always i use JQuery and GSAP, all of this you can do in Vanilla Javascript, but i like the ease of use of GSAP for this.