Animations

You can animate certain actions to give them a visual effect as they occur in the web browser, such as hiding a widget with a fading animation or moving a widget with a bouncing animation.

There are two parts to every animation: its effect and its timing.

  • The animation's effect, which you select in the Animate dropdown, determines the visual effect of the animation.

  • The animation's timing, which you enter in the ms field, determines the time in milliseconds that it will take for the animation to be completed.

Visibility Effects

The following effects can be applied to actions that change the visibility of widgets. These are the Show/Hide action and the Set Panel State action.

  • Fade: Gradually changes the widget or panel state's opacity until it is completely in or out of view

  • Slide left/right/up/down: Slides the widget or state into or out of view

  • Flip left/right/up/down: Flips the widget or state into or out of view along a center axis (X for up/down and Y for left/right)

Movement Effects

Also known as "easings," the following effects determine the pacing of the animation within the designated timing. These can be applied to actions that change the spatial orientation of a widget or the page itself. These are the Scroll to Widget, Move, Rotate, Set Size, and Set Opacity actions.

  • Swing: The animation is very slightly slower at the beginning and end of the timing than it is at the midpoint

  • Linear: The animation progresses at the same speed throughout the entire timing

  • Ease in cubic: The animation starts out slow and progressively gets faster until the end of the timing

  • Ease out cubic: The animation starts out fast and progressively gets slower until the end of the timing

  • Ease in out cubic: The animation starts out slow and progressively gets faster until the midpoint of the timing; then it progressively gets slower again. (This is similar to Swing but more pronounced.)

  • Bounce: The animation speeds up like Ease in cubic but bounces back a few times once the animation's finishing point is reached

  • Elastic: The animation overshoots its finishing point and then springs back to it

Note

Click here to download the completed RP file for these examples.

← Style EffectsVariables →