PrimeUIX Motion

Framework-agnostic motion engine for CSS transitions and animations. Drives enter/leave phase logic, manages lifecycle hooks, tracks element dimensions for height/width expand-collapse effects, and respects prefers-reduced-motion.

import { createMotion } from '@primeuix/motion';

const motion = createMotion(el, {
    name: 'p-overlay',
    autoHeight: true,
    onBeforeEnter: (el) => { ... },
    onAfterLeave: (el) => { ... }
});

motion.enter();
motion.leave();

Phases are driven through data-enter-phase / data-leave-phase attributes on the target element, which CSS classes hook into. Height and width transitions read dimensions via scrollHeight / scrollWidth and expose them as CSS custom properties. When safe is set, motion is skipped entirely if the user has requested reduced motion.

License

Licensed under the PrimeUI License - Copyright (c) PrimeTek Informatics