Animations

Components can animate when they first appear on screen using onMount animations. These are entrance animations that play once when the page renders.

Animation Types

Type	Effect
`fadeUp`	Fades in while sliding up (20px).
`fadeDown`	Fades in while sliding down (20px).
`fadeLeft`	Fades in while sliding from the right (20px).
`fadeRight`	Fades in while sliding from the left (20px).
`fade`	Fades in (opacity only).
`scale`	Fades in while scaling up from 90%.
`slideUp`	Slides up from 50px below (no fade).
`slideDown`	Slides down from 50px above (no fade).

Each onMount animation has three settings:

Setting	Type	Description
`delay`	milliseconds	Time to wait before the animation starts. Use staggered delays across sibling components for a cascading effect.
`duration`	milliseconds	How long the animation takes to complete.
`enabled`	boolean	Whether the animation is active.

The animation uses a cubic-bezier(0.4, 0, 0.2, 1) easing curve — a smooth ease-out that feels natural for entrance animations.

Separately from onMount animations, components support an animationBehavior for interactive feedback when tapped:

Stagger onMount delays across a list of elements (e.g., 0ms, 100ms, 200ms) for a sequential reveal effect.
Keep durations between 200ms and 500ms for smooth, non-distracting animations.
Use fadeUp as the default entrance animation — it works well for most content.
For loading/results pages, combine onMount animations with CountUp and Progress Bar elements for a polished reveal sequence.