useEntryAnimation
Returns a StyleX style for animating an element on mount. Only animates when the element is dynamically inserted after the initial page paint; elements rendered on page load are not animated. Uses Astryx motion tokens (duration, easing) for consistent animation timing. Requires "use client"; does not support SSR.
@astryxdesign/core/hooks
Signature
Call shape
useEntryAnimation(preset: EntryAnimationPreset = 'slideDown'): StyleXStyles | nullParameters
| Name | Type and behavior |
|---|---|
preset | 'slideDown' | 'slideUp' | 'fadeIn' | 'scaleIn' · optional · default 'slideDown'Animation preset to apply on mount. |
Returns
| Name | Type and behavior |
|---|---|
entryStyle | StyleXStyles | nullA StyleX style object for the entry animation, or null if the element was rendered on initial page load (no animation needed). |
Usage
Returns a StyleX style for animating an element on mount. Only animates when the element is dynamically inserted after the initial page paint; elements rendered on page load are not animated. Uses Astryx motion tokens (duration, easing) for consistent animation timing. Requires "use client"; does not support SSR.
- Use for conditionally rendered elements like validation messages, toasts, or expanding sections.
- Spread the returned style into stylex.props() alongside other styles.
- Use for elements that should be visible on initial page load; they will not animate.