Animation

The Animation pattern describes animations that occur as the page or feature transitions. This is a method of visually enhancing an application and in some cases providing useful feedback on how it behaves. Several animated transitions are described below. Currently MAF supports the following transitions:

• Deck and Page Component: Slide, Flip
• Popup: Slide, Pop
• DVT Components: Slide, Flip, Fade, Cube, Pop, Zoom

Appearance & Behavior

Appearance characteristics for this component.

Slide

This transition occurs when the page or view slides left, right, up or down off the screen until it disappears, or slides on the screen until it appears.

Examples on the Phone:

• Slide in from right on a drill-down, or from tapping a list item, etc...
• Slide out from the left to drill-back out of content details page, close list item, etc...
• Slide from bottom to top to start creating a new object or begin displaying secondary actions.
• Slide from top to bottom when done, when creating a new object or when hiding secondary actions.

Examples on the Tablet:

• Slide up from the bottom to open a popup with details.
• Slide down from the application screen to close a popup with details.

Flip or Turn

This transition occurs when the page or view turns or flips over to reveal content on the back or flip side. Usually the initial flip of the page is from right-to-left and then left-to-right to return the user to the original page or view. Also a transition can turn or flip from bottom-to-top and then top-to-bottom to return the user to the original view.

• Use when turning pages in mobile books or with content. Common on tablets, but also is used on the phone.
• Use when switching between related views similar to the Yelp application that changes between List and Map views.
• Use when accessing Settings or Additional information in a Utility-style application, similar to the Yahoo Weather application that flips pages over to content on the back.

Curl or Peel

This transition occurs when the page or view curls or peels up to show what is behind it or curls or peels down to hide what is behind it. An alternate version of this is when an object curls up and slides into a container. Also called 'Pull back the Curtain.'

• Use when tapping an icon or button curls the page up, and tapping again curls it down.
• Use to move an object into a container. Also called "Shrink and Slide".

Fold

This transition occurs when the page or view folds up until it disappears, or unfolds until it fully appears. An alternate version is when an object is scrunched up into a ball, like a piece of paper. Similar to Zoom or Pop.

Fade

This transition occurs when the page or view becomes dimmer until it disappears, or brighter until it fully appears. Similar to Dissolve.

• Use when a page level inline message fades out after a few seconds of being viewed.

Dissolve

This transition occurs when the page or view dissolves or pixel-ates until it disappears, or when the animation resolves the pixelated image until it fully appears. Similar to Fade.

Pop or Zoom

This transition occurs when the page or view zooms out, minimizes, or collapses to center until it disappears; it also appears when the page or view zooms in (maximizes or expands from center) until it fully appears.

• Use when springboard or launch icons expand or zoom out to open an application, similar to iOS Home screen and the Facebook application.
• Use to move an object into a container, i.e. when deleting a message in iOS Email application, the message shrinks and slides into a trash can.
• The pinch or expand gesture could also be used in conjunction with the zoom transition.

Rotate or Roll or Spin

This transition occurs when the page or view rotates or collapses into the center of the screen as a whirlpool, until it disappears, or when it rotates outward from the center of the screen until it fully appears. Similar to Zoom or Pop.

• Use when tapping an icon so that it rotates outward on the page then and rotates into another page similar to the Yahoo Weather application or the Yelp application.

Combinations

• Stack: Zoom out and slide to be on top of a stack of pages, objects or thumbnails.
• Flow: Zoom out and slide left or right on or off the page.
• Cube: Zoom out to a cube and then turn on or off the page.

Usage

Usage guidelines for this component.

• Add animated transitions cautiously and use them consistently throughout your app.
• Transitions should start immediately on the action that triggers them.
• Consider the cultures that you are designing for if sliding left or right has other meanings.

Related

• Used On: Phone, Tablet
• Also Called: Animated Transition, Page Transition, Rich Effect
• Related Components: None
• Resources: None