Add an Animation to a Page or Widget

Animations can be added to pages or widgets to provide visual indicators for transitions to other pages or widgets. The Crestron Template Project supports animations that use Animatopy classes. Runtime animation type changes are not supported. Page animations are also applicable only when cache is true and preload is true/false.

NOTE: Animations are not supported within projects that use the <ch5-video> component. Videos may not display correctly on pages or widgets if animations are present in the project.

To add an animation to a page or widget, configure the following attributes within the <ch5-template> component:

  • transitionDuration: The duration that the animation will be shown during a transition (for both page show and page hide). String values are accepted (for example, "1s", "5s", "500ms"). The default value is "1s".
  • transtionDelay: The duration that the animation will be delayed from starting during a transition (for both page show and page hide). String values are accepted (for example, "1s", "5s", "500ms"). The default value is "0s".
  • transitionIn: Sets the animation type that will be shown at the start of the transition. The following types are supported:

    • NOTE: These animation types are case sensitive.

    • bounceIn
    • bounceInDown
    • bounceInLeft
    • bounceInRight
    • bounceInUp
    • fadeIn
    • fadeInDown
    • fadeInDownBig
    • fadeInLeft
    • fadeInLeftBig
    • fadeInRight
    • fadeInRightBig
    • fadeInUp
    • fadeInUpBig
    • flipInX
    • flipInY
    • lightSpeedIn
    • rollIn
    • rotateIn
    • rotateInDownLeft
    • rotateInDownRight
    • rotateInUpLeft
    • rotateInUpRight
    • slideInDown
    • slideInLeft
    • slideInRight
    • slideInUp
    • zoomIn
    • zoomInDown
    • zoomInLeft
    • zoomInRight
    • zoomInUp
  • transitionOut: Sets the animation type that will be shown at the end of the transition. The following types are supported:

    • NOTE: These animation types are case sensitive.

    • bounceOut
    • bounceOutDown
    • bounceOutLeft
    • bounceOutRight
    • bounceOutUp
    • fadeOut
    • fadeOutDown
    • fadeOutDownBig
    • fadeOutLeft
    • fadeOutLeftBig
    • fadeOutRight
    • fadeOutRightBig
    • fadeOutUp
    • fadeOutUpBig
    • flipOutX
    • flipOutY
    • lightSpeedOut
    • rollOut
    • rotateOut
    • rotateOutDownLeft
    • rotateOutDownRight
    • rotateOutUpLeft
    • rotateOutUpRight
    • slideOutDown
    • slideOutLeft
    • slideOutRight
    • slideOutUp
    • zoomOut
    • zoomOutDown
    • zoomOutLeft
    • zoomOutRight
    • zoomOutUp

Refer to the following sample code:

Copy 
<ch5-template
    templateId="templateId"
    context="original:replacement"
    transitionIn="slideInDown"
    transitionOut="slideOutUp"
    transitionDuration="1s"
    transitionDelay="0s">
</ch5-template>