Home
 
Categories
 
Motion Principles
 
About
 
Contact
 
Orientation
Spatial Extension
Awakening Controls
Highlight
Feedback
Feedforward
Interaction
 
drag and drop
 
hover over
 
flick
 
pinch
 
press
 
press and hold
 
scroll
 
swipe
 
type
 
pan
 
Trigger
 
direct
 
indirect
 
passive
 
Object
 
alert
 
button
 
e-book
 
card
 
chat
 
controls
 
download
 
grid view
 
input field
 
information visualizatio
 
label
 
list
 
 
list
 
list object
 
lock screen
 
object
 
map
 
page
 
photo
 
scroll bar
 
thumbnail view
 
window
 
video
 
magazine
 
Device
 
OS (Win, Mac)
 
Mobile OS
 
Web
 
Categorie
 
Orientation
 
Spatial Extension
 
Awaking Controls
 
Highlight
 
Feedback
 
Feedforward
 
 
 
Meaningful Transitions - Motion Graphics in the User Interface
 
 
»Meaningful Transitions - Motion Graphics in the User Interface« deals with the use of animations in the user interface. It documents transitions in a clustered way to show at which point transitions can be a helpful extension to a static user interface, because of cognitive benefits to enhance the user experience.
 
 
Categories
 
 
The purpose of Meaningful Transitions is to illustrate the process of the interaction and the structure of the user interface. They focus on specific events, or clarifying the user's interaction by animation. All transitions are divided into six categories in order to differentiate between their application. The aim is to present a scaleable collection of existing transitions. The transitions are shown in an abstract visualization to clarify their purposes, these visualizations also contain concrete examples. A closer look at a transition offers more information on the field of use, the mental model, the consistency, the cognitive benefit, and the illusion. see more
 
 
Motion Principles
 
 
»Does your animation have weight, depth and balance?« [De Cock 2011: S.16] Disney's Twelve Basic Principles of Animation are a set of rules that define a realistic impression of a motion within the basic laws of physics. Some of these principles have great relevance for the animations in a user interface. see more
 
 
Orientation Description
 
Orientation describes the way in which a logical connection can be created and visualized between objects and object's states. Often used animations in this category are directional motions. They give an impression of the location and the structure of information. Orientation describes the object's environment and therefore the system's information architecture. For that reason, Orientation invites the user to explore the user interface.
 
 
Orientation Transitions
 
Slide
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A directional transition to show the arrangement of objects.
Field Of Use When the user navigates through a list of objects.
Description The object list moves according to the swipe interaction of the user. The objects move into position, automatically.
Consistency Directional transition. The object slides according to the direction of the interaction.
Benefit A directional transition to show the arrangement of objects.
Illustration The objects seem to be arranged on a long ribbon
Example: test
 
Example: test
 
Example: test
 
Example: test
 
 
Fan of Stack
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain the arrangement of objects, by showing how they are placed.
Field Of Use When the user opens a stack of objects.
Description The stack opens while the user pinches an object‘s stack.
Consistency Closing the stack.
Benefit A transition to explain the arrangement of objects, by showing how they are placed.
Illustration The objects seems to be extended on the stage.
Example: test
 
 
Device Rotation
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to visualize that the content orientates according to the rotation of the device.
Field Of Use When the content need to rotate and rearrange.
Description The content on the screen rotates within the orientation of the device.
Consistency The content needs to rotate according to the rotation of the device.
Benefit A transition to visualize that the content orientates according to the rotation of the device.
Illustration The content seems to move according to the rotation of the device.
 
Pan
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to pan a map.
Field Of Use When moving an object horizontally and vertically.
Description A two directional scrolling.
Consistency -
Benefit A transition to pan a map.
Illustration -
 
Popup
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain which specific object scales to fullscreen view.
Field Of Use When the user interacts with an object.
Description The object transitions from a thumbnail view to full screen view.
Consistency The reversed transition is the transition from full screen view back to thumbnail view.
Benefit A transition to explain which specific object scales to fullscreen view.
Illustration The object seems to grow on stage.
Example: test
 
Example: test
 
 
Page Turn
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A Transition to explain the information architecture of the list in a narrative way.
Field Of Use When the user turns a page.
Description The page turns while the user swipes the content.
Consistency Directional transition. The page turns according to the direction of the interaction.
Benefit A Transition to explain the information architecture of the list in a narrative way.
Illustration The virtual page seems to behave similar to its real reference.
 
Button to Label
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show the connection between the button and the content. The directional transition explains the structure.
Field Of Use When navigating through hierarchy.
Description The label of the button transitions into the title of the content.
Consistency The title of the content changes.
Benefit A transition to show the connection between the button and the content. The directional transition explains the structure.
Illustration The button becomes the label.
 
Scroll Bar
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to indicate the length and position of the related list.
Field Of Use When scrolling a list.
Description The length and the position of a scrollbar give the user an impression of the length and the position of the scrolling list.
Consistency -
Benefit A transition to indicate the length and position of the related list.
Illustration -
 
Minimize
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain where a minimized object can be found. The object is placed on a less prominent place on the screen, but it is still available.
Field Of Use When the user needs to minimize an object.
Description The object shrinks while moving to a certain position on the screen.
Consistency The reversed transition is extending the object back to fullscreen.
Benefit A transition to explain where a minimized object can be found. The object is placed on a less prominent place on the screen, but it is still available.
Illustration The object seems to shrink.
 
Add to List
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain the rearranged structure of a list.
Field Of Use When the user adds another object to a list.
Description The new object slides into position while the old content of the list makes place for the new one.
Consistency The reversed transition is deleting an object of the list.
Benefit A transition to explain the rearranged structure of a list.
Illustration The objects seem to make space for the new one.
Example: test
 
 
Combine – Split
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to visualize the connection between objects by splitting or combining them.
Field Of Use When the user combines objects.
Description The objects are combined/splitted by the interaction of the user.
Consistency Splitting and combining.
Benefit A transition to visualize the connection between objects by splitting or combining them.
Illustration Splitting and combining objects.
 
Page Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to visualize the amount of pages while indicating the current pages.
Field Of Use When flipping through pages book, screens.
Description A moving dot to indicate the switching of a page. At the same time it shows the amount of pages.
Consistency -
Benefit A transition to visualize the amount of pages while indicating the current pages.
Illustration -
 
Object Switch
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain the connection by switching between applications.
Field Of Use When the user switches between objects.
Description The present object moves to the back, while the new application moves to the front.
Consistency -
Benefit A transition to explain the connection by switching between applications.
Illustration The objects seem to make place for the other.
 
Fixed Label
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show the connection between the label and the content.
Field Of Use When the user scrolls through a list with labels.
Description The label of the list stays in top of the list, as long as the content is available.
Consistency -
Benefit A transition to show the connection between the label and the content.
Illustration The label seems to be stuck at top of the list.
Example: test
 
 
Scroll
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to scroll a list.
Field Of Use When moving an object horizontally or vertically.
Description A one directional scrolling.
Consistency -
Benefit A transition to scroll a list.
Illustration -
 
Saving Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to tell the user where to find the object after saving/bookmarking/downloading.
Field Of Use When the user saves, downloads or bookmarks an object.
Description As soon as an object is saved/downloading/bookmarked, it actually moves into the folder.
Consistency -
Benefit A transition to tell the user where to find the object after saving/bookmarking/downloading.
Illustration An instance of the object seems to moves into the folder.
 
 
 
Spatial Extension Description
 
Spatial Extension reduces the complexity of the user interface by extending the virtual space. This allows a gradual experience of information by opening or closing the space at given time, in order to let the user focus on the important elements. This category is a tool for spatial extension in the user interface, especially for devices with a smaller screen, thus saving important space. This way, information can be placed more clearly, for example on a display of a mobile phone, by creating space, or overlapping layers. An often used animation for Spatial Extension is turning two dimensional planes in to three dimensional cubes.
 
 
Spatial Extension Transitions
 
Accordion
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The content of the object of interest reveals. The content area extends and pushes further menu items down.
Consistency The object of interest shrinks back to regular size.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The menu seems to act as an accordion.
 
Folding
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show that only a part of an object is visible. By interacting with it, it reveals to full size.
Field Of Use When there is additional content relating to the object of interest.
Description The interaction opens both (or several) sides of a folded object.
Consistency fold in - fold out
Benefit A transition to show that only a part of an object is visible. By interacting with it, it reveals to full size.
Illustration The object seems to be folded.
Example: test
 
Example: test
 
 
Area Split
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The area splits to reveal detailed information.
Consistency Splitting - merging.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The screen seems to split and the content is underneath the layer of the actual screen.
Example: test
 
 
Flip
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The object turns for further information.
Consistency 180° has two sides – two states.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration Further information seem to be on the back of an object.
 
Mask Expand
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show that by scaling the mask of an object reveals the hidden content.
Field Of Use When there is additional content relating to the object of interest.
Description The object expands its borders to reveal hidden content.
Consistency Shrinking back to regular size.
Benefit A transition to show that by scaling the mask of an object reveals the hidden content.
Illustration Further content is hidden behind the border of an object.
Example: test
 
 
Growing Input Field
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to visualize the growing of an input field according to the length of the input.
Field Of Use When the user needs more space to display the input.
Description The size of the input field grows according to the size of the user‘s input.
Consistency Deleting the input shrinks back the input field.
Benefit A transition to visualize the growing of an input field according to the length of the input.
Illustration The input field seems to grow according to the user‘s input.
 
Popup Preview
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to let the user have a quick preview of the content by interacting with the thumbnail view.
Field Of Use When there is additional content relating to the object of interest.
Description The object rotates 180° for further information.
Consistency 180° has two sides – two states.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration Further information seem to be on the back of an object.
Example: test
 
 
Zoom
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When the user focuses the object of interest.
Description The object of interest zooms in for more detailed information.
Consistency Zoom in - zoom out.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The object of interest seems to come closer and a more detailed view is possible.
Example: test
 
 
Half Flip
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The object rotates from 2d space to 3d space for further information.
Consistency -
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The 2d object rotates in space to show the 3d possibilities for placing information.
 
Text Truncation
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show more text on less needed space.
Field Of Use When there is hidden text.
Description If the text is longer than its text field, the text is truncated and reveals by moving with the users reading flow.
Consistency The direction of the moving truncated text depends on the cultural reading flow.
Benefit A transition to show more text on less needed space.
Illustration -
 
 
 
Awaking Controls Description
 
Awaking Controls allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed. When the user switches into a certain mode, Awaking Controls can communicate new forms of interaction by using animations. Slidings and fadings are among the most common animations used for this purpose.
 
 
Awaking Controls Transitions
 
Swipe to Delete
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to support an intuitive interaction of deleting an object. After swiping an object of the screen, a button appears to confirm the action.
Field Of Use When the user needs the delete function for the related list item.
Description The delete button slides in by swiping a list item.
Consistency directional swipe
Benefit A transition to support an intuitive interaction of deleting an object. After swiping an object of the screen, a button appears to confirm the action.
Illustration The delete button seems to be pushed on screen after swiping a list element.
 
Slide-in Controls
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to introduce a new object. It is only visible when needed.
Field Of Use When the user needs to activate the touch keyboard.
Description The object slides in to introduce the new input field.
Consistency Slide in - slide out.
Benefit A transition to introduce a new object. It is only visible when needed.
Illustration The object slides in.
Example: test
 
Example: test
 
Example: test
 
Example: test
 
 
Mode Switch
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to introduce new controls by sliding in. The moving of the items‘ labels underlines the importance of the new controls.
Field Of Use When the user needs extra controls for editing the related list.
Description As the mode switches, the extra controls slide in. The items‘ labels move to indicate the mode switch.
Consistency The extra controls move off the screen by switching the mode back to regular mode.
Benefit A transition to introduce new controls by sliding in. The moving of the items‘ labels underlines the importance of the new controls.
Illustration The extra controls seem to be pushed on screen after swiping a list element.
 
Spring Refresh
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to use the intuitive interaction of a list. By scrolling a list, the function appears underneath the related list.
Field Of Use When the user refreshes or updates the related list.
Description The function is revealed by overstretching the spring of a list. The function is activated by either releasing the list, or pulling the list to a specific point.
Consistency Covering the function should cancel the action.
Benefit A transition to use the intuitive interaction of a list. By scrolling a list, the function appears underneath the related list.
Illustration By overstretching the spring of a list, the function seems to be underneath the related list.
Example: test
 
 
Appearing Controls
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to let the user concentrate on the content without being distracted by playback controls. It is only visible when needed.
Field Of Use When the user needs to activate/deactivate the video playback controls.
Description By tapping the video, the playback controls appear.
Consistency Tap to appear the playback controls – tap to disappear
Benefit A transition to let the user concentrate on the content without being distracted by playback controls. It is only visible when needed.
Illustration -
Example: test
 
Example: test
 
 
 
 
Highlight Description
 
Highlighting is the guidance of attention by using animations. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed. The aim of Highlighting is to direct the user's attention to specific objects by using an animation. The usage of lighting and shading are often used examples of Highlighting.
 
 
Highlight Transitions
 
Scale to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object scales to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
Example: test
 
 
Blur to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects blur to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Change Depth to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object moves in front of the other highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration The objects seem to change the depth.
 
Rotate to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object rotates to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
Example: test
 
 
Darken to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects darken to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
Example: test
 
Example: test
 
Example: test
 
Example: test
 
 
Gray out to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects gray out to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Color to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object colors to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Flip to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object flips to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
Example: test
 
Example: test
 
 
Expand to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to show which object is active on interaction by expanding it.
Field Of Use When a specific object needs to be highlighted.
Description The objects grows as soon as the user interacts with it.
Consistency If an object is no longer activated, it should shrink back to the original size.
Benefit A transition to show which object is active on interaction by expanding it.
Illustration -
Example: test
 
 
Fade to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects fade to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
Example: test
 
 
Glow to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object glows to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
Example: test
 
 
 
 
Feedback Description
 
Feedback comprehensively indicates what the result was of the user's interaction. This category signifies a running process or indicates whether or not an action was successful, upon an unsuccessful action it explains why. For Feedback, the most often used animations are popups and progress-based animations.
 
 
Feedback Transitions
 
 
 
Feedforward Description
 
Feedforward functions as a conveyor of possible interactions. An illustrating animation is used to prepare the user for the outcome of an action. By visualizing the consequences of the action, the resulting event is more predictable and easier to follow. The user can estimate the event more precisely and interpret it more reliably. At the same time an animation can invite the user to interact and present new interaction mechanisms.
 
 
Feedforward Transitions
 
Explaining Direction
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to explain a directional interaction.
Field Of Use When the system needs to explain a directional interaction.
Description A glow moves directional across the object to explain the interaction.
Consistency -
Benefit A transition to explain a directional interaction.
Illustration The object seems to glow.
Example: test
 
 
Explaining Interaction
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to explain the interaction in form of a tutorial-like visualization.
Field Of Use When the user needs explanation for a unknown interaction.
Description An animated fingerprint explains how and where to interact. The animation should only start if the user waits for a little time.
Consistency -
Benefit A transition to explain the interaction in form of a tutorial-like visualization.
Illustration -
Example: test
 
 
Affordance
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to present a possible interaction.
Field Of Use When the system needs to introduce its interactivity.
Description The fullscreen object jumps to reveal the hidden content below.
Consistency -
Benefit A transition to present a possible interaction.
Illustration The jumping object seems to cover the content.
 
Explaining Position
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to show the placing of an object.
Field Of Use When the user needs a hint for placing an object.
Description The transition indicates a valid position by showing an instance of the object moving towards the valid position.
Consistency -
Benefit A transition to show the placing of an object.
Illustration -
Example: test
 
 
Hidden Feature
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to explain what is necessary to activate a hidden function.
Field Of Use When the user activates the spring refresh, the effecting hidden function is visualized.
Description The function hidden function appears below the list and explains it outcome.
Consistency The function is only released at a specific point.
Benefit A transition to explain what is necessary to activate a hidden function.
Illustration -
Example: test
 
Example: test
 
 
Solidarity
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to indicate the connection between objects.
Field Of Use When the user moves an object into another.
Description The objects refer to the object of interest, by scaling or shrinking, according to its solidarity.
Consistency -
Benefit A transition to indicate the connection between objects.
Illustration -
 
Explaining Length
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to communicate the length and the position of a list.
Field Of Use When the user needs a hint for the length of an object.
Description The scroll bar appears as the user interacts with the list. The animation explains the length and the position of that list.
Consistency The object disappears as the user releases the list.
Benefit A transition to communicate the length and the position of a list.
Illustration -
 
 
 
Motion Principles
 
 
Does your animation have weight, depth and balance? [De Cock 2011: S.16] Disney's Twelve Basic Principles of Animation is a set of rules that defines a realistic impression of a motion with the basic laws of physics. Some of these principles have great relevance for the animations in the user Interface.
 
 
About
 
This Website was created in context of the Interface Design Bachelor's degree at the FH Potsdam 2011 by Johannes Tonollo. »Meaningful Transitions - Motion Graphics in the User Interface« deals with the use of animations in software user interface. This website documents transitions in a clustered way to show at which place transitions can be a helpful extension to the static user interface, because of cognitive benefits to enhance the user experience.

Click to read »Meaningful Transitions - Motion Graphics in the User Interface« (Preview/German)

If you are interested in reading the full Thesis (in German), please contact me at:
info@johannes-tonollo.com. I would be happy to send it to you.
 
 
Contact
 
If you are interested in this topic and would like to exchange information don't hesitate to contact me. You can contact me for work, as well.

Email: info@johannes-tonollo.com
Visit my portfolio on www.johannes-tonollo.com
Accordion
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The content of the object of interest reveals. The content area extends and pushes further menu items down.
Consistency The object of interest shrinks back to regular size.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The menu seems to act as an accordion.
 
Appearing Controls
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to let the user concentrate on the content without being distracted by playback controls. It is only visible when needed.
Field Of Use When the user needs to activate/deactivate the video playback controls.
Description By tapping the video, the playback controls appear.
Consistency Tap to appear the playback controls – tap to disappear
Benefit A transition to let the user concentrate on the content without being distracted by playback controls. It is only visible when needed.
Illustration -
Example: test
 
Example: test
 
 
Color to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object colors to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Explaining Interaction
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to explain the interaction in form of a tutorial-like visualization.
Field Of Use When the user needs explanation for a unknown interaction.
Description An animated fingerprint explains how and where to interact. The animation should only start if the user waits for a little time.
Consistency -
Benefit A transition to explain the interaction in form of a tutorial-like visualization.
Illustration -
Example: test
 
 
Fan of Stack
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain the arrangement of objects, by showing how they are placed.
Field Of Use When the user opens a stack of objects.
Description The stack opens while the user pinches an object‘s stack.
Consistency Closing the stack.
Benefit A transition to explain the arrangement of objects, by showing how they are placed.
Illustration The objects seems to be extended on the stage.
Example: test
 
 
Folding
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show that only a part of an object is visible. By interacting with it, it reveals to full size.
Field Of Use When there is additional content relating to the object of interest.
Description The interaction opens both (or several) sides of a folded object.
Consistency fold in - fold out
Benefit A transition to show that only a part of an object is visible. By interacting with it, it reveals to full size.
Illustration The object seems to be folded.
Example: test
 
Example: test
 
 
Half Flip
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The object rotates from 2d space to 3d space for further information.
Consistency -
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The 2d object rotates in space to show the 3d possibilities for placing information.
 
Mask Expand
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show that by scaling the mask of an object reveals the hidden content.
Field Of Use When there is additional content relating to the object of interest.
Description The object expands its borders to reveal hidden content.
Consistency Shrinking back to regular size.
Benefit A transition to show that by scaling the mask of an object reveals the hidden content.
Illustration Further content is hidden behind the border of an object.
Example: test
 
 
Page Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to visualize the amount of pages while indicating the current pages.
Field Of Use When flipping through pages book, screens.
Description A moving dot to indicate the switching of a page. At the same time it shows the amount of pages.
Consistency -
Benefit A transition to visualize the amount of pages while indicating the current pages.
Illustration -
 
Popup Preview
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to let the user have a quick preview of the content by interacting with the thumbnail view.
Field Of Use When there is additional content relating to the object of interest.
Description The object rotates 180° for further information.
Consistency 180° has two sides – two states.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration Further information seem to be on the back of an object.
Example: test
 
 
Scroll
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to scroll a list.
Field Of Use When moving an object horizontally or vertically.
Description A one directional scrolling.
Consistency -
Benefit A transition to scroll a list.
Illustration -
 
Solidarity
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to indicate the connection between objects.
Field Of Use When the user moves an object into another.
Description The objects refer to the object of interest, by scaling or shrinking, according to its solidarity.
Consistency -
Benefit A transition to indicate the connection between objects.
Illustration -
 
Zoom
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When the user focuses the object of interest.
Description The object of interest zooms in for more detailed information.
Consistency Zoom in - zoom out.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The object of interest seems to come closer and a more detailed view is possible.
Example: test
 
 
Area Split
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The area splits to reveal detailed information.
Consistency Splitting - merging.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The screen seems to split and the content is underneath the layer of the actual screen.
Example: test
 
 
Button to Label
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show the connection between the button and the content. The directional transition explains the structure.
Field Of Use When navigating through hierarchy.
Description The label of the button transitions into the title of the content.
Consistency The title of the content changes.
Benefit A transition to show the connection between the button and the content. The directional transition explains the structure.
Illustration The button becomes the label.
 
Combine – Split
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to visualize the connection between objects by splitting or combining them.
Field Of Use When the user combines objects.
Description The objects are combined/splitted by the interaction of the user.
Consistency Splitting and combining.
Benefit A transition to visualize the connection between objects by splitting or combining them.
Illustration Splitting and combining objects.
 
Explaining Length
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to communicate the length and the position of a list.
Field Of Use When the user needs a hint for the length of an object.
Description The scroll bar appears as the user interacts with the list. The animation explains the length and the position of that list.
Consistency The object disappears as the user releases the list.
Benefit A transition to communicate the length and the position of a list.
Illustration -
 
Fixed Label
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show the connection between the label and the content.
Field Of Use When the user scrolls through a list with labels.
Description The label of the list stays in top of the list, as long as the content is available.
Consistency -
Benefit A transition to show the connection between the label and the content.
Illustration The label seems to be stuck at top of the list.
Example: test
 
 
Glow to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object glows to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
Example: test
 
 
Minimize
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain where a minimized object can be found. The object is placed on a less prominent place on the screen, but it is still available.
Field Of Use When the user needs to minimize an object.
Description The object shrinks while moving to a certain position on the screen.
Consistency The reversed transition is extending the object back to fullscreen.
Benefit A transition to explain where a minimized object can be found. The object is placed on a less prominent place on the screen, but it is still available.
Illustration The object seems to shrink.
 
Page Turn
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A Transition to explain the information architecture of the list in a narrative way.
Field Of Use When the user turns a page.
Description The page turns while the user swipes the content.
Consistency Directional transition. The page turns according to the direction of the interaction.
Benefit A Transition to explain the information architecture of the list in a narrative way.
Illustration The virtual page seems to behave similar to its real reference.
 
Rotate to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object rotates to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
Example: test
 
 
Scroll Bar
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to indicate the length and position of the related list.
Field Of Use When scrolling a list.
Description The length and the position of a scrollbar give the user an impression of the length and the position of the scrolling list.
Consistency -
Benefit A transition to indicate the length and position of the related list.
Illustration -
 
Spring Refresh
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to use the intuitive interaction of a list. By scrolling a list, the function appears underneath the related list.
Field Of Use When the user refreshes or updates the related list.
Description The function is revealed by overstretching the spring of a list. The function is activated by either releasing the list, or pulling the list to a specific point.
Consistency Covering the function should cancel the action.
Benefit A transition to use the intuitive interaction of a list. By scrolling a list, the function appears underneath the related list.
Illustration By overstretching the spring of a list, the function seems to be underneath the related list.
Example: test
 
 
Add to List
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain the rearranged structure of a list.
Field Of Use When the user adds another object to a list.
Description The new object slides into position while the old content of the list makes place for the new one.
Consistency The reversed transition is deleting an object of the list.
Benefit A transition to explain the rearranged structure of a list.
Illustration The objects seem to make space for the new one.
Example: test
 
 
Change Depth to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object moves in front of the other highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration The objects seem to change the depth.
 
Darken to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects darken to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
Example: test
 
Example: test
 
Example: test
 
Example: test
 
 
Expand to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to show which object is active on interaction by expanding it.
Field Of Use When a specific object needs to be highlighted.
Description The objects grows as soon as the user interacts with it.
Consistency If an object is no longer activated, it should shrink back to the original size.
Benefit A transition to show which object is active on interaction by expanding it.
Illustration -
Example: test
 
 
Explaining Position
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to show the placing of an object.
Field Of Use When the user needs a hint for placing an object.
Description The transition indicates a valid position by showing an instance of the object moving towards the valid position.
Consistency -
Benefit A transition to show the placing of an object.
Illustration -
Example: test
 
 
Flip
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The object turns for further information.
Consistency 180° has two sides – two states.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration Further information seem to be on the back of an object.
 
Gray out to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects gray out to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Hidden Feature
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to explain what is necessary to activate a hidden function.
Field Of Use When the user activates the spring refresh, the effecting hidden function is visualized.
Description The function hidden function appears below the list and explains it outcome.
Consistency The function is only released at a specific point.
Benefit A transition to explain what is necessary to activate a hidden function.
Illustration -
Example: test
 
Example: test
 
 
Mode Switch
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to introduce new controls by sliding in. The moving of the items‘ labels underlines the importance of the new controls.
Field Of Use When the user needs extra controls for editing the related list.
Description As the mode switches, the extra controls slide in. The items‘ labels move to indicate the mode switch.
Consistency The extra controls move off the screen by switching the mode back to regular mode.
Benefit A transition to introduce new controls by sliding in. The moving of the items‘ labels underlines the importance of the new controls.
Illustration The extra controls seem to be pushed on screen after swiping a list element.
 
Pan
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to pan a map.
Field Of Use When moving an object horizontally and vertically.
Description A two directional scrolling.
Consistency -
Benefit A transition to pan a map.
Illustration -
 
Saving Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to tell the user where to find the object after saving/bookmarking/downloading.
Field Of Use When the user saves, downloads or bookmarks an object.
Description As soon as an object is saved/downloading/bookmarked, it actually moves into the folder.
Consistency -
Benefit A transition to tell the user where to find the object after saving/bookmarking/downloading.
Illustration An instance of the object seems to moves into the folder.
 
Slide
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A directional transition to show the arrangement of objects.
Field Of Use When the user navigates through a list of objects.
Description The object list moves according to the swipe interaction of the user. The objects move into position, automatically.
Consistency Directional transition. The object slides according to the direction of the interaction.
Benefit A directional transition to show the arrangement of objects.
Illustration The objects seem to be arranged on a long ribbon
Example: test
 
Example: test
 
Example: test
 
Example: test
 
 
Swipe to Delete
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to support an intuitive interaction of deleting an object. After swiping an object of the screen, a button appears to confirm the action.
Field Of Use When the user needs the delete function for the related list item.
Description The delete button slides in by swiping a list item.
Consistency directional swipe
Benefit A transition to support an intuitive interaction of deleting an object. After swiping an object of the screen, a button appears to confirm the action.
Illustration The delete button seems to be pushed on screen after swiping a list element.
 
Affordance
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to present a possible interaction.
Field Of Use When the system needs to introduce its interactivity.
Description The fullscreen object jumps to reveal the hidden content below.
Consistency -
Benefit A transition to present a possible interaction.
Illustration The jumping object seems to cover the content.
 
Blur to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects blur to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Device Rotation
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to visualize that the content orientates according to the rotation of the device.
Field Of Use When the content need to rotate and rearrange.
Description The content on the screen rotates within the orientation of the device.
Consistency The content needs to rotate according to the rotation of the device.
Benefit A transition to visualize that the content orientates according to the rotation of the device.
Illustration The content seems to move according to the rotation of the device.
 
Explaining Direction
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to explain a directional interaction.
Field Of Use When the system needs to explain a directional interaction.
Description A glow moves directional across the object to explain the interaction.
Consistency -
Benefit A transition to explain a directional interaction.
Illustration The object seems to glow.
Example: test
 
 
Fade to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects fade to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
Example: test
 
 
Flip to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object flips to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
Example: test
 
Example: test
 
 
Growing Input Field
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to visualize the growing of an input field according to the length of the input.
Field Of Use When the user needs more space to display the input.
Description The size of the input field grows according to the size of the user‘s input.
Consistency Deleting the input shrinks back the input field.
Benefit A transition to visualize the growing of an input field according to the length of the input.
Illustration The input field seems to grow according to the user‘s input.
 
Object Switch
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain the connection by switching between applications.
Field Of Use When the user switches between objects.
Description The present object moves to the back, while the new application moves to the front.
Consistency -
Benefit A transition to explain the connection by switching between applications.
Illustration The objects seem to make place for the other.
 
Popup
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain which specific object scales to fullscreen view.
Field Of Use When the user interacts with an object.
Description The object transitions from a thumbnail view to full screen view.
Consistency The reversed transition is the transition from full screen view back to thumbnail view.
Benefit A transition to explain which specific object scales to fullscreen view.
Illustration The object seems to grow on stage.
Example: test
 
Example: test
 
 
Scale to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object scales to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
Example: test
 
 
Slide-in Controls
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to introduce a new object. It is only visible when needed.
Field Of Use When the user needs to activate the touch keyboard.
Description The object slides in to introduce the new input field.
Consistency Slide in - slide out.
Benefit A transition to introduce a new object. It is only visible when needed.
Illustration The object slides in.
Example: test
 
Example: test
 
Example: test
 
Example: test
 
 
Text Truncation
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show more text on less needed space.
Field Of Use When there is hidden text.
Description If the text is longer than its text field, the text is truncated and reveals by moving with the users reading flow.
Consistency The direction of the moving truncated text depends on the cultural reading flow.
Benefit A transition to show more text on less needed space.
Illustration -