A Simple and Quick Animated Dialog Action in SketchFlow

I wanted to create a confirmation dialog in SketchFlow as quickly as possible, with these main objectives:

  • Reusable – therefore also only have to change it in one location.
  • Quickly – aside from hiccups with z-order.
  • Efficiently – point of contention, there may be a simpler way.

So I came up with this approach. Following on from my post the other day about creating re-usable components. I spawned a new reusable screen. With a simple grey background, some text and 2 buttons.

Basic dialog screen
Basic dialog screen

This logout component screen is then associated with another component screen which happens to be my reusable header section, as a common logout button at the top right of every screen. This 2 step embedding of the dialog screen allows it to be automatically added to each of the screens in the SketchFlow application.

Logout Button on Reusable Header
Logout Button on Reusable Header

To launch the dialog from any screen the ‘logout’ button on the header screen activates the show dialog animation. But first the logout component screen is positioned below the header component screen, so when it is made visible on the application screens it appears centralised. The ‘Base’ state of the header screen has the logout component screen not-visible.

Header Section with Logout Dialog
Header Section with Logout Dialog

Important Tip: The header section will need to be added to all your application screens last to ensure the position of the popup on the z-axis is topmost.

Back to the Logout Dialog:

The animation action for the “No, Stay” is a 2 second fade out on all the components of the dialog. Of course here you can perform any transitions you like. It simply returns the dialog to its hidden state.

Hide Logout Dialog State
Hide Logout Dialog State

The ‘Hide’ state simply sets the visibility at the 2 second keyframe. The ‘* -> Hide’ action performs the fade effect via altering its transparency.

The animation action for the “Yes, Logout” is the same fade as the “No, Stay”. But also has a ‘Navigate To’ action for the home/welcome page of the application (or wherever your logout action will take you).

Navigate & Animate for Logout
Navigate & Animate for Logout

I hope that’s simple enough to follow along. In summary:

  • 2 Components screens: header and logout
  • 2 animations: show logout, hide logout
  • 1 ‘navigate to’ action: on the ‘yes’ click

The logout fade being 2 seconds may look strange when ‘Yes’ is clicked as the Navigate-To action will happen instantly, so a new animation state with a faster fade makes it look less awkward.

Published by Nick Josevski

Software Engineer at Octopus Deploy

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: