<insert previous page>

===== Page Transitions - Animation Type =====

Dialog selections are discussed below the image.
{{imapmarkers>:ui:ui-ui_anim-page_trans-selection.webp?direct&200|Page Transitions - Animation Type}}
[[:ui:ui-ui_anim-page_trans|ID1|Sliding@22,45,177,62]]
[[:ui:ui-ui_anim-page_trans|ID2|Sliding (3D)@24,75,176,91]]
[[:ui:ui-ui_anim-page_trans|ID3|Fading@21,101,175,119]]
[[:ui:ui-ui_anim-page_trans|ID4|From the back@20,131,175,148]]
[[:ui:ui-ui_anim-page_trans|ID5|From the front@23,160,178,176]]
[[:ui:ui-ui_anim-page_trans|ID6|Removing card 1@21,187,174,206]]
[[:ui:ui-ui_anim-page_trans|ID7|Removing card 2@23,217,178,233]]
[[:ui:ui-ui_anim-page_trans|ID8|Adding card 1@23,241,176,262]]
[[:ui:ui-ui_anim-page_trans|ID9|Adding card 2@21,273,175,291]]
[[:ui:ui-ui_anim-page_trans|ID10|Flipping card@21,299,176,319]]
[[:ui:ui-ui_anim-page_trans|ID11|Accordion@23,330,180,348]]
[[:ui:ui-ui_anim-page_trans|ID12|Cube@21,358,175,376]]
[[:ui:ui-ui_anim-page_trans|ID13|Ripple@22,380,177,399]]
[[:ui:ui-ui_anim-page_trans|ID14|Flipping page@22,407,177,428]]
{{cfg>}}
{
}
{{<cfg}}
{{<imapmarkers}}

<wrap hi>**Page Transitions - Animation Type dialog. //ANY// selection made will return to the previous page.**</wrap>

==== Page Transition: Description & Demos ====

In the Total Launcher app after a selection is made the user is returned to the ''UI & Animation'' > ''Transition'' page for selection of other options. The app shows **//no//** visualization of the transition format ... but in this uiTLM demo, visualization is shown when clicking on it's title in the //alphabetical// listing below.

^ Transition Title ^ Description ^
| ++Accordion | {{:section:TL-page_transition-accordion.gif}} ++ | Similar to Flipping card but it is more concave as the transition moves away from the user revealing the next page as if seeing the new bellows of an accordion. |
| ++Adding card 1 | {{:section:TL-page_transition-adding_card_1.gif}} ++ | The new page slides left or right **on top** of the existing page. The existing page remains completely stationary. |
| ++Adding card 2 | {{:section:TL-page_transition-adding_card_2.gif}} ++ | The new page slides left or right **on top**. The existing page underneath shifts slightly in the the same direction and darkens as it disappears. |
| ++Cube | {{:section:TL-page_transition-cube.gif}} ++ | Pages rotate as if they are the faces on the outside of a spinning 3D cube. |
| ++Fading | {{:section:TL-page_transition-fading.gif}} ++ | The existing page simply fades out to reveal the new page. There is no sliding or 3D movement. |
| ++Flipping card | {{:section:TL-page_transition-flipping_card.gif}} ++ | A rigid rotation of the existing page which pivots on it's vertical center to reveal the new page on it's other side. |
| ++Flipping page | {{:section:TL-page_transition-flipping_page.gif}} ++ | Simulates a physical book page turning, complete with a curling effect at the corner. |
| ++From the back | {{:section:TL-page_transition-from_the_back.gif}} ++ | Similar to From the front which switches the action on the direction of the swipe. Here: **Swipe right to left**: the //new page emerges from the back// as the existing page dissolves as it moves forward; **Swipe left to right**: the //new page emerges from the front// as the existing page dissolves to the back. |
| ++From the front | {{:section:TL-page_transition-from_the_front.gif}} ++ | Similar to From the back which switches the action on the direction of the swipe. Here: **Swipe right to left**: the //new page emerges from the front// as the existing page dissolves to the back; **Swipe left to right**: the //new page moves from back to front// as the existing page moves forward and dissolves. |
|++Removing card 1| {{:section:TL-page_transition-removing_card_1.gif}} ++ | The existing page slides **away** (on top) to reveal the new page underneath. The new page remains completely stationary. |
|++Removing card 2| {{:section:TL-page_transition-removing_card_2.gif}} ++ | The existing page slides **away** (on top) to reveal the new screen underneath. The new screen shifts slightly into place and brightens. |
| ++Ripple | {{:section:TL-page_transition-ripple.gif}} ++ | The page distorts with a radial wave effect, simulating water ripples that expand outward to reveal the new page. |
| ++Sliding | {{:section:TL-page_transition-sliding.gif}} ++ | The new page slides either left or right as it pushes the existing page in the same direction |
| ++Sliding (3D) | {{:section:TL-page_transition-sliding_3D.gif}} ++ | The existing page shows a perspective of depth as it turns on a spindle either left or right to reveal the  page new witch has the opposite entry effect. |

<WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>

<wrap hide>
===== Hidden Index Anchors =====
[[:ui:ui-ui_anim-page_trans|ID1|Sliding@22,45,177,62]]
[[:ui:ui-ui_anim-page_trans|ID2|Sliding (3D)@24,75,176,91]]
[[:ui:ui-ui_anim-page_trans|ID3|Fading@21,101,175,119]]
[[:ui:ui-ui_anim-page_trans|ID4|From the back@20,131,175,148]]
[[:ui:ui-ui_anim-page_trans|ID5|From the front@23,160,178,176]]
[[:ui:ui-ui_anim-page_trans|ID6|Removing card 1@21,187,174,206]]
[[:ui:ui-ui_anim-page_trans|ID7|Removing card 2@23,217,178,233]]
[[:ui:ui-ui_anim-page_trans|ID8|Adding card 1@23,241,176,262]]
[[:ui:ui-ui_anim-page_trans|ID9|Adding card 2@21,273,175,291]]
[[:ui:ui-ui_anim-page_trans|ID10|Flipping card@21,299,176,319]]
[[:ui:ui-ui_anim-page_trans|ID11|Accordion@23,330,180,348]]
[[:ui:ui-ui_anim-page_trans|ID12|Cube@21,358,175,376]]
[[:ui:ui-ui_anim-page_trans|ID13|Ripple@22,380,177,399]]
[[:ui:ui-ui_anim-page_trans|ID14|Flipping page@22,407,177,428]]
{{cfg>}}
{
}
{{<cfg}}
</wrap>