Here is a thread from a few years ago offering up a 3D cube - slightly different from what I see in your work but maybe it is actually what You are looking for:
And here is the Hype file to go with it: 3dcube.hype.zip (141.6 KB)
Having an initial intermediate slate and then always wanting to go between red or green
I would accomplish it by:
Use a single sprite sheet that starts as red, animates to the intermediate state, and then animates to fill green
On Scene Load pause the main timeline, and go to the middle time
have the red button continue the main timeline in reverse
have the green button continue the main timeline forwards
You could accomplish something with two sprite sheets, but that is unneeded complexity. Also note that the display property that you have with javascript code can be done by animating the display property in Hype (under the Element Inspector's Visibility section). But this wouldn't be needed with a solo sprite sheet.
If you intend to have a multitude of other states you'd really need to have all the different combinations of animations between them and then use some javascript to determine which timeline to run on button press.
If you did have a lot of different states, you may want to try using vector shape animations (with the "Direct Anchor Point Match" algorithm) and relative keyframes.
There is always the template by @Luckyde (haven't seen him for a while now). But you would have to dig into his custom logic. Not done with only Hype but then again creating Sprite sheets also requires additional third-party tools and logical planning beforehand.
Yeah that script's pretty old by this point but it does stilll work fine, for a 3d script cube i would consider either therejs
https://codepen.io/GreenSock/pen/BaNQpQZ (this example's animation is done with gsap but the core is webgl threejs)
which is a proper 3d library for the web where you can easily make your own 3d box and text on top, theres great docs its just really big in filesize if youre doing this for something small
or just looking at doing it with css e.g. https://codepen.io/jonathan/pen/FEbzA
If you google css cube youll find a bunch of examples and im pretty sure mine was an offshoot of those too. The only issue with css is it would be a bit more work to wrap youre head around the layering and you need to test it in all browsers to make sure it works since 3d transforms in css sometimes get weird. But its the most light weight solution that doesnt include animations of transitiosn in image sequences
And both of these can be done within the hype interface and work fine