useEntryAnimation · astryx-svelte

useEntryAnimation @astryx-svelte/core v0.3.0 · hooks

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.

ts
 
import { hooks } from '@astryx-svelte/core/hooks';

Best practices

Guidance	Practices
Do	Use for conditionally rendered elements like validation messages, toasts, or expanding sections.
Do	Spread the returned style into stylex.props() alongside other styles.
Don't	Use for elements that should be visible on initial page load; they will not animate.

Parameters

Parameter	Type	Default	Description
`preset`	`'slideDown' \| 'slideUp' \| 'fadeIn' \| 'scaleIn'`	`'slideDown'`	Animation preset to apply on mount.

Returns

Field	Type	Default	Description
`entryStyle`	`StyleXStyles \| null`	—	A StyleX style object for the entry animation, or null if the element was rendered on initial page load (no animation needed). `useEntryAnimation()` returns the style itself — `StyleArg \| null`, this port’s spelling of upstream’s `StyleXStyles \| null`. Spread it with `sx(...)`; the name labels the single return value rather than a member.