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
-
Fade and scale: Simultaneously changes the opacity and scales the widget or state into or out of view using a set anchor point and scale factor
-
Scale: Scales the widget or state into or out of view using a set anchor point and scale factor
-
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
Apply style & Style effects transitions
When you set up an apply style interaction or apply a style effect, you can set up a transition to animate changes between styles. For example when you change a style from blue to red it will animate the color change with the easing and duration you choose.
You can also configure a transform origin to determine the point an animation originates from for scale and rotate animations.
