AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling.
import AnimateOnScroll from 'primevue/animateonscroll';
app.directive('animateonscroll', AnimateOnScroll);
Animation classes are defined with the enterClass and leaveClass properties. This example utilizes PrimeFlex animations however any valid CSS animation is supported.
<div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<span class="text-3xl font-bold">fade-in</span>
</div>
<div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">fade-left</span>
</div>
<div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">fade-right</span>
</div>
<div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<span class="text-3xl font-bold">zoom</span>
</div>
<div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">flip-left</span>
</div>
<div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">flip-y</span>
</div>
<div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-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.