<WRAP hide>%%<!-- googleoff: index -->%%</WRAP>
<WRAP center notice centeralign>
**⚠️ v4.0 UI Transition Notice - In Process:**
//The release of Total Launcher v4.0 has introduced significant user interface changes. Please note that this 
page does not yet reflect these updates. The new layout paths, folds, and visual maps are currently being 
compiled and will be deployed shortly.//
</WRAP>
<WRAP hide>%%<!-- googleon: index -->%%</WRAP>


----


[[:ui:ui-ui_anim-page_trans|Return to previous screen]]

=====  Page Transition - Animation Effect  =====

Dialog selections are discussed below the image. For navigation to a description of an item make a selection in the Page Transition - Animation Effect image or [[:ui:ui-ui_anim-page_trans|return to previous screen]].

{{imapmarkers>:ui:ui-ui_anim-page_trans-animation-anim_effect.webp?direct&400|Page Transition - Animation Effect}}
[[#decelerate|ID1|Decelerate@22,106,377,147]]
[[#accelerate|ID2|Accelerate@28,172,370,211]]
[[#accelerate-decelerate|ID3|Accelerate-Decelerate@31,232,367,274]]
[[#linear|ID4|Linear@30,291,368,331]]
[[#overshoot|ID5|Overshoot@26,354,375,398]]
[[#anticipate_overshoot|ID6|Anticipate overshoot@28,420,379,456]]
[[#bounce|ID7|Bounce@26,476,371,521]]
{{cfg>}}
{
}
{{<cfg}}
{{<imapmarkers}}

<wrap hi>**Page Transition - Animation Effect dialog. Make selection above.**</wrap>

==== Decelerate ====
  * ++Demo|{{:ui:ui-ui_anim-page_trans-animation-anim_effect-decelerate.gif}}++ The page starts moving fast, immediately, and slows down gently as it snaps into place as if in a soft landing. It feels natural and responsive.

==== Accelerate ====
  * ++Demo|{{:ui:ui-ui_anim-page_trans-animation-anim_effect-accelerate.gif}}++ Starts slowly and builds up speed, reaching maximum velocity right as the animation ends. It gives the feeling of pushing a heavy object that takes a moment to get moving. The result: pages feel like they are "flying away."

==== Accelerate-Decelerate ====
  * ++Demo|{{:ui:ui-ui_anim-page_trans-animation-anim_effect-accelerate-decelerate.gif}}++ In a combination of the two above, the page starts slow, speeds up in the middle, and slows down to a soft stop for a polished look.

==== Linear ====
  * ++Demo|{{:ui:ui-ui_anim-page_trans-animation-anim_effect-linear.gif}}++ The page moves at a perfectly constant speed from start to finish. It may appear robotic with no flair. Use this for the purest possible transition.

==== Overshoot ====
  * ++Demo|{{:ui:ui-ui_anim-page_trans-animation-anim_effect-overshoot.gif}}++ The page slides quickly to its destination, goes slightly *past* the stop point with it's momentum, and then snaps back into place.

==== Anticipate Overshoot ====
  * ++Demo|{{:ui:ui-ui_anim-page_trans-animation-anim_effect-anticipate_overshoot.gif}}++ A complex motion. The page briefly pulls backward as if to anticipate before launching forward and shooting past the destination before settling back. A good choice for fun or futuristic themes, but can be distracting in a minimalist setup.

==== Bounce ====
  * ++Demo|{{:ui:ui-ui_anim-page_trans-animation-anim_effect-bounce.gif}}++ A playful animation where the page arrives at its destination and literally bounces against the "wall" of the screen edge multiple times before settling.

<WRAP center round tip 60%>
<WRAP centeralign>**Page Transitions are Affected by Animation Duration**</WRAP>

The duration of the animation [[:ui:ui-ui_anim-page_trans-animation-anim_duration|(explanined here)]] heavily impacts these effects.

</WRAP>

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

<wrap hide>
===== Hidden Index Anchors =====
[[#decelerate|ID1|Decelerate@22,106,377,147]]
[[#accelerate|ID2|Accelerate@28,172,370,211]]
[[#accelerate-decelerate|ID3|Accelerate-Decelerate@31,232,367,274]]
[[#linear|ID4|Linear@30,291,368,331]]
[[#overshoot|ID5|Overshoot@26,354,375,398]]
[[#anticipate_overshoot|ID6|Anticipate overshoot@28,420,379,456]]
[[#bounce|ID7|Bounce@26,476,371,521]]
{{cfg>}}
{
}
{{<cfg}}
</wrap>