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: (You can fork this project and see how it was made).

In this project, we:

  1. Added a "fill" property to the oval, and gave it a value in frame 30.

  2. In frame 50, gave it a different value/color.

  3. A tween was automatically created in between, but you can change it to any other transition.

  4. 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.

  5. 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.

Did this answer your question?