AnimateOnScroll AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling.
import { AnimateOnScroll } from 'primeng/animateonscroll';
Animation classes are defined with the enterClass and leaveClass properties. This example utilizes PrimeFlex animations however any valid CSS animation is supported.
<div class="flex flex-col items-center gap-2">
<span class="text-xl font-medium">Scroll Down</span>
<span class="slidedown-icon h-8 w-8 bg-primary text-primary-contrast rounded-full inline-flex items-center justify-center">
<i class="pi pi-arrow-down"></i>
</span>
</div>
<div class="h-[30rem]"></div>
<div
pAnimateOnScroll
enterClass="animate-fadein"
leaveClass="animate-fadeout"
class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000"
>
<span class="text-3xl font-bold">fade-in</span>
</div>
<div class="h-[30rem]"></div>
<div
pAnimateOnScroll
enterClass="animate-fadeinleft"
leaveClass="animate-fadeoutleft"
class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000 animate-ease-in-out"
>
<span class="text-3xl font-bold">fade-left</span>
</div>
<div class="h-[30rem]"></div>
<div
pAnimateOnScroll
enterClass="animate-fadeinright"
leaveClass="animate-fadeoutright"
class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000 animate-ease-in-out"
>
<span class="text-3xl font-bold">fade-right</span>
</div>
<div class="h-[30rem]"></div>
<div
pAnimateOnScroll
enterClass="animate-zoomin"
leaveClass="animate-fadeout"
class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000"
>
<span class="text-3xl font-bold">zoom</span>
</div>
<div class="h-[30rem]"></div>
<div
pAnimateOnScroll
enterClass="animate-flipleft"
leaveClass="animate-fadeout"
class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000 animate-ease-in-out"
>
<span class="text-3xl font-bold">flip-left</span>
</div>
<div class="h-[30rem]"></div>
<div
pAnimateOnScroll
enterClass="animate-flipup"
leaveClass="animate-fadeout"
class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000 animate-ease-in-out"
>
<span class="text-3xl font-bold">flip-y</span>
</div>
<div class="h-[30rem]"></div>
<div
pAnimateOnScroll
enterClass="animate-scalein"
leaveClass="animate-fadeout"
class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000 animate-ease-in-out"
>
<span class="text-3xl font-bold">scalein</span>
</div>
AnimateOnScroll does not require any roles and attributes.
Component does not include any interactive elements.