React Hookv1.0.0 • Strict TypeScript

useAnimationState()

A specialized lifecycle hook to track whether a page transition is idle, exiting, entering, or complete in real time.

ES Module Import

import { useAnimationState } from '@/components/glidecn';

Lifecycle States

Returns an AnimationState union type that updates as the animation engine progresses through route phases.

Signature

const state: 'idle' | 'entering' | 'exiting' | 'complete' = useAnimationState();

const state: 'idle' | 'entering' | 'exiting' | 'complete' = useAnimationState();

"idle"

No animation active; view is stable and interactive.

"exiting"

Old view is frozen in DOM and executing exit variants.

"entering"

New view has mounted and is animating into position.

"complete"

Transition has finished completely.

Practical implementations for navigation guards, interaction locks, and animated status badges.