Keep SketchFlow Animation States Simple

After a 2 hour headache dealing with attempting to create a complex configuration of SketchFlow states with multiple nested (‘Add Transition’) states for the simplest of toggling animation states.

Additional Sub States

Additional Sub States

I discovered that complexity was not necessary for a toggling action. The desired output was basically the equivalent of a button with a standard and pressed state. Including the reverse action.

State flow of controls

State flow of controls

The Initial State (left) is the base state. On the click of the red x transition to the Second State (right). Vice-Versa on the click of the green tick.

This is simply achieved with 2 clicks on the ‘Add State’ button, and setting the transparency on the 3 objects.

States For Rectangle Transition

States For Rectangle Transition

State 1

  • Rectangle – Appearance, Opacity = 100%
  • Red X – Appearance, Opacity = 100%
  • Green Tick – Appearance, Opacity = 0%

State 2
1. Set Default transition duration to 1.5 seconds
2. Set ‘Make Transparent’ with the following settings:

  • Rectangle – Appearance, Opacity = 20%
  • Red X – Appearance, Opacity = 0%
  • Green Tick – Appearance, Opacity = 100%

Then on the red x select ‘make transparent’ and on the green tick select ‘_default’.

Select Transition on Controls

Select Transition on Controls

The issue I was having with complex sub-states was the elements not persisting the end of their animation when it’s time duration completed. i.e. not staying transparent on the red x click. So it was obviously a conflicting set of transitions.

Lesson Learnt: Keep it simple.

Update:
Found this great video tutorial from Jose Fajardo on a post at Cynergy Systems Blogs. It’s about states and transitions, fluid layout and deign time transition preview. There’s more to come from him, I’m looking forward to seeing more.

Advertisements