Skip to main content

Patterns

 

OutSystems

Animate

Create animations on elements inside the placeholder.

Use Animate to add default animations to emphasize elements as they appear on the screen. Animations should resemble familiar real-life movements, helping the user understand the interface.

How to use

Drag the content inside the placeholder and configure the animation type of the Block. You can also define the start time and duration of the animation.

  1. Drag the Animate pattern into the preview.

  2. Set the content you need on the placeholder.

  3. Set the Input Parameters to extend the default values.

Input Parameters

Input Name Description Type Mandatory Default Value
EnterAnimation Set the enter animation. EnterAnimation Identifier False Entities.EnterAnimation.EnterFade
LeaveAnimation Set the leave animation. LeaveAnimation Identifier False Entities.LeaveAnimation.LeaveFade
Speed Time necessary for the animation reach the end. Speed Identifier False None
Delay Time to wait before animation starts, in miliseconds Integer False 0
ExtendedClass Add custom style classes to this Block. Text False None

Layout and Classes

CSS Selectors

Element CSS Class Description
.animate-wrapper .is--visible When the animation will enter in the screen
.animate-wrapper .is--hidden When the animation will leave in the screen
.animate .enter-bottom When the animation will enter in the screen from bottom
.animate .enter-fade When the animation will enter in the screen with fade
.animate .enter-left When the animation will enter in the screen from left
.animate .enter-right When the animation will enter in the screen from right
.animate .enter-scale When the animation will enter in the screen with scale
.animate .enter-top When the animation will enter in the screen from top
.animate .leave-bottom When the animation will leave the screen from bottom
.animate .leave-fade When the animation will leave the screen with fade
.animate .leave-left When the animation will leave the screen from left
.animate .leave-right When the animation will leave the screen from right
.animate .leave-scale When the animation will leave the screen with scale
.animate .leave-top When the animation will leave the screen from top
.animate .animate-slow The animation will reach the end in 1500ms
.animate .animate-fast The animation will reach the end in 500ms

Advanced Use Case

Use the ToggleAnimate Server Action

It is possible to hide elements in the screen using an Animation.

  1. Set a name to the Animate pattern.

  2. Set the method of the On Click function to Submit and in the Destination property, create a new Action.

  3. In the Action created, drag the ToggleAnimate Action and set the Widget ID.

  4. Publish and test.

Use Animations On Scroll

It is possible to load and animate the elements when they are not visible in the screen.

  1. Drag the LoadOnVisible Pattern. Add the Animate Pattern with the desired content inside LoadOnVisible.

  2. Publish and test.

  • Was this article helpful?