Adding Animation Effects

You can use the ojModule binding’s animation property in conjunction with the ModuleAnimations namespace to configure animation effects when the user transitions between or drills into views. If you’re not using ojModule, you can use the oj.AnimationUtils namespace instead to add animation to Oracle JET components or HTML elements.

Adding Animation Effects Using the ojModule Binding

The oj.ModuleAnimations namespace includes pre-configured implementations that you can use to configure the following animation effects:

  • coverStart: The new view slides in to cover the old view.

  • coverUp: The new view slides up to cover the old view.

  • drillIn: Animation effect is platform-dependent.

    • Web and iOS: coverStart

    • Android: coverUp

    • Windows: zoomIn

  • drillOut: Animation effect is platform-dependent.

    • Web and iOS: revealEnd

    • Android: revealDown

    • Windows: zoomOut

  • fade: The new view fades in and the old view fades out.

  • goLeft: Navigate to sibling view on the left. Default effect is platform-dependent.

    • Web and iOS: none

    • Android and Windows: pushRight

  • goRight: Navigate to sibling view on the right. Default effect is platform-dependent.

    • Web and iOS: none

    • Android and Windows: pushLeft

  • pushLeft: The new view pushes the old view out to the left.

  • pushRight: The new view pushes the old view out to the right.

  • revealDown: The old view slides down to reveal the new view.

  • revealEnd: The new view slides left or right to reveal the new view, depending on the locale.

  • zoomIn: The new view zooms in.

  • zoomOut: The old view zooms out.

For examples that illustrate how to add animation with the ojModule binding, see Animation Effects with ojModule Binding.

Adding Animation Effects Using oj.AnimationUtils

The oj.AnimationUtils namespace includes methods that you can use to configure the following animation effects on HTML elements and Oracle JET components:

  • collapse: Use for collapsing the element

  • expand: Use for expanding the element

  • fadeIn and fadeOut: Use for fading the element into and out of view.

  • flipIn and flipOut: Use for rotating the element in and out of view.

  • ripple: Use for rippling the element.

  • slideIn and slideOut: Use for sliding the element into and out of view.

  • zoomIn and zoomOut: Using for zooming the element into and out of view.

Depending on the method’s options, you can configure properties like delay, duration, and direction. For examples that illustrate how to configure animation using the oj.AnimationUtils namespace, see Animation Effects.