Animate

Animate manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load.

Import #


import { AnimateModule } from 'primeng/animate';

Basic #

Animate uses PrimeFlex animations, however it can perform animations with custom CSS classes too. Takes enterClass and leaveClass properties to simply add animation class during scroll or page load to manage elements animation if the element is entering or leaving the viewport.

flip
flip up


<div pAnimate enterClass="flip" leaveClass="fadeoutleft" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
    <span class="text-900 text-3xl font-bold">flip</span>
</div>