The issue you are experiencing is because when you trigger a State transition on a string (e.g. a color), the value of the state does not change until the end of the transition. Hence, you get no animation/transition.
A workaround is to use the timeline as a state machine. That is, to create the animation you want in a portion of the timeline and then use a Click Action to Go To and Play from the keyframe where the animation starts. For example:
In this project, we:
- Added a "fill" property to the oval, and gave it a value in frame 30.
- In frame 50, gave it a different value/color.
- A tween was automatically created in between, but you can change it to any other transition.
- Added a Click Action to the button, and used the Go To and Play snippet to have the animation jump to frame 30 when the user clicks on the button.
- Added a "Pause" Frame Action on frame 0, so that the animation doesn't play automatically, and a "Stop" Frame Action on frame 50, so that it doesn't loop back to frame 0.
For tutorials, please visit our Learn page.