Workflow Short – Form Animation Samples

As an illustrated response to jdeleon7010’s post on the Connect forums here, this post will demonstrate some of the animations I’ve put together for various projects.

The original post:

Has anyone been able to create animated elements within workflow?  I am not looking for anything in particular, just trying to get more creative in our form designs.

So, here are some examples of how we can begin to improve the user experience a bit.  Some are “animations” in a true sense, while others are transition events.


animation1
Flashing icon to indicate functionality to a user.

animation2
Fade In/Out Toolbar Actions, Spinning Icon

animation4
Fade In/Out Toolbar Actions, Spinning and Leaning Icons

animation3
Rotating Validation Icons

animation5
Flyout Menu, Flashing Icon, Fade In/Out Panel, Moving Buttons

animation6
Expanding/Collapsing Menus

animation7
Simple Button Grow In/Out

animation8
Simple Flyout Menu

animation9
Simple Dropdown Buttons

animation10
Loading Spinner 1

animation11
Loading Spinner 2

Again, these are just a handful of examples of how we can cosmetically improve the user’s experience with Workflow forms.

2 thoughts on “Workflow Short – Form Animation Samples

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s