[[: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>