# useEntryAnimation

## Usage

Returns a class 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. Nothing animates during server rendering.

```ts
import { useEntryAnimation } from '@astryx-vue/core'
```

Bind the returned `entryClass` next to the element's own classes; Vue merges `class` bindings, so it never replaces them. `entryClass` is `null` when the element should not animate, and a class binding drops `null`, which is exactly the behavior you want. The class carries the shared keyframes from `styles/motion.css`, so duration, easing, and the reduced-motion fallback all come from the theme.

## Best practices

| Guidance | Practices |
| --- | --- |
| Do | Use for conditionally rendered elements like validation messages, toasts, or expanding sections. |
| Do | Add the returned class next to the element's own classes, so the animation stacks with its styling instead of replacing it. |
| Don't | Use for elements that should be visible on initial page load; they will not animate. |

## Parameters

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `preset` | `'slideDown' \| 'slideUp' \| 'fadeIn' \| 'scaleIn'` | `'slideDown'` | Animation preset to apply on mount. `slideDown` drops in from above, `slideUp` rises from below, `fadeIn` only fades, and `scaleIn` fades while scaling up. |

## Returns

| Name | Type | Description |
| --- | --- | --- |
| `entryClass` | `string \| null` | A shared motion class for the entry animation, or `null` if the element was rendered on initial page load (no animation needed). One of `astryx-motion-slide-in-below`, `astryx-motion-slide-in-above`, `astryx-motion-fade-in`, or `astryx-motion-scale-in`. |