Animations

The tailwindcss-primeui plugin is packed with animation utilities.

APIPassThroughAccessibility

Demo #

This example combines tailwindcss-primeui plugin animations with the v-animateonscroll directive of PrimeVue. Since Volt utilizes PrimeVue under the hood, you may take advantage of this directive as well.


import AnimateOnScroll from 'primevue/animateonscroll';

app.directive('animateonscroll', AnimateOnScroll);
Scroll Down
IndividualLorem ipsum dolor sit amet consectetur adipisicing elit.
TeamLorem ipsum dolor sit amet consectetur adipisicing elit.
EnterpriseLorem ipsum dolor sit amet consectetur adipisicing elit.
Jenna ThompsonLorem ipsum dolor sit amet consectetur adipisicing elit.
Isabel GarciaLorem ipsum dolor sit amet consectetur adipisicing elit.
Xavier MasonLorem ipsum dolor sit amet consectetur adipisicing elit.
850KCustomersLorem ipsum dolor sit amet consectetur adipisicing elit.
$1.5MRevenueLorem ipsum dolor sit amet consectetur adipisicing elit.
140KSalesLorem ipsum dolor sit amet consectetur adipisicing elit.
BandwidthLorem ipsum dolor sit amet consectetur adipisicing elit.
StorageLorem ipsum dolor sit amet consectetur adipisicing elit.
RequestsLorem ipsum dolor sit amet consectetur adipisicing elit.

<template>
    <div class="card flex flex-col items-center overflow-hidden">
        <div class="flex flex-col items-center gap-2">
            <span class="text-xl font-medium">Scroll Down</span>
            <span class="animate-bounce h-8 w-8 bg-primary text-primary-contrast rounded-full inline-flex items-center justify-center">
                <i class="pi pi-arrow-down" />
            </span>
        </div>
        <div class="h-[30rem]"></div>
        <div class="flex flex-wrap justify-center gap-8">
            <div
                v-animateonscroll="{ enterClass: 'animate-enter fade-in-10 slide-in-from-l-8 animate-duration-1000', leaveClass: 'animate-leave fade-out-0' }"
                class="flex flex-col border border-surface shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4"
            >
                <div class="rounded-full bg-primary text-primary-contrast w-12 h-12 flex items-center justify-center">
                    <i class="pi pi-user !text-2xl"></i>
                </div>
                <span class="text-2xl font-bold">Individual</span>
                <span class="text-muted-color text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
            </div>
            <div
                v-animateonscroll="{ enterClass: 'animate-enter fade-in-10 animate-duration-1000', leaveClass: 'animate-leave fade-out-0' }"
                class="flex flex-col border border-surface shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4"
            >
                <div class="rounded-full bg-primary text-primary-contrast w-12 h-12 flex items-center justify-center">
                    <i class="pi pi-users !text-2xl"></i>
                </div>
                <span class="text-2xl font-bold">Team</span>
                <span class="text-muted-color text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
            </div>
            <div
                v-animateonscroll="{ enterClass: 'animate-enter fade-in-10 slide-in-from-r-8 animate-duration-1000', leaveClass: 'animate-leave fade-out-0' }"
                class="flex flex-col border border-surface shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4"
            >
                <div class="rounded-full bg-primary text-primary-contrast w-12 h-12 flex items-center justify-center">
                    <i class="pi pi-building !text-2xl"></i>
                </div>
                <span class="text-2xl font-bold">Enterprise</span>
                <span class="text-muted-color text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
            </div>
        </div>
        <div class="h-[30rem]"></div>
        <div class="flex flex-wrap justify-center gap-8">
            <div v-animateonscroll="{ enterClass: 'animate-enter fade-in-10 slide-in-from-t-20 animate-duration-1000' }" class="flex flex-col border border-primary-200 shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4">
                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" size="xlarge" />
                <span class="text-2xl font-medium">Jenna Thompson</span>
                <span class="text-muted-color text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
            </div>
            <div v-animateonscroll="{ enterClass: 'animate-enter fade-in-10 slide-in-from-b-20 animate-duration-1000' }" class="flex flex-col border border-primary-200 shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4">
                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" size="xlarge" />
                <span class="text-2xl font-medium">Isabel Garcia</span>
                <span class="text-muted-color text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
            </div>
            <div v-animateonscroll="{ enterClass: 'animate-enter fade-in-10 slide-in-from-t-20 animate-duration-1000' }" class="flex flex-col border border-primary-200 shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4">
                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" size="xlarge" />
                <span class="text-2xl font-medium">Xavier Mason</span>
                <span class="text-muted-color text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
            </div>
        </div>
        <div class="h-[30rem]"></div>
        <div class="flex flex-wrap justify-center gap-8">
            <div
                v-animateonscroll="{ enterClass: 'animate-enter fade-in-10 spin-in-45 slide-in-from-t-12 animate-duration-1000' }"
                class="flex flex-col bg-primary text-primary-contrast border-primary shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4"
            >
                <span class="bg-white/20 text-xl font-medium rounded-xl px-4 py-2">850K</span>
                <span class="text-2xl font-bold">Customers</span>
                <span class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
            </div>
            <div
                v-animateonscroll="{ enterClass: 'animate-enter fade-in-10 zoom-in-50 slide-in-from-t-20 animate-duration-1000' }"
                class="flex flex-col bg-primary text-primary-contrast border-primary shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4"
            >
                <span class="bg-white/20 text-xl font-medium rounded-xl px-4 py-2">$1.5M</span>
                <span class="text-2xl font-bold">Revenue</span>
                <span class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
            </div>
            <div
                v-animateonscroll="{ enterClass: 'animate-enter fade-in-10 spin-in-[-45deg] slide-in-from-t-16 animate-duration-1000' }"
                class="flex flex-col bg-primary text-primary-contrast border-primary shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4"
            >
                <span class="bg-white/20 text-xl font-medium rounded-xl px-4 py-2">140K</span>
                <span class="text-2xl font-bold">Sales</span>
                <span class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
            </div>
        </div>
        <div class="h-[30rem]"></div>
        <div class="flex flex-wrap justify-center gap-8">
            <div v-animateonscroll="{ enterClass: 'animate-enter fade-in-10 zoom-in-50 animate-duration-1000' }" class="flex flex-col bg-purple-500 text-white border-purple-500 shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4">
                <div class="rounded-full border-2 border-white w-12 h-12 flex items-center justify-center">
                    <i class="pi pi-wifi !text-2xl"></i>
                </div>
                <span class="text-2xl font-bold">Bandwidth</span>
                <span class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
            </div>
            <div v-animateonscroll="{ enterClass: 'animate-enter fade-in-10 zoom-in-75 animate-duration-1000' }" class="flex flex-col bg-teal-500 text-white border-teal-500 shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4">
                <div class="rounded-full border-2 border-white w-12 h-12 flex items-center justify-center">
                    <i class="pi pi-database !text-2xl"></i>
                </div>
                <span class="text-2xl font-bold">Storage</span>
                <span class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
            </div>
            <div v-animateonscroll="{ enterClass: 'animate-enter fade-in-10 zoom-in-50 animate-duration-1000' }" class="flex flex-col bg-indigo-500 text-white border-indigo-500 shadow-lg justify-center items-center max-w-80 rounded-2xl p-8 gap-4">
                <div class="rounded-full border-2 border-white w-12 h-12 flex items-center justify-center">
                    <i class="pi pi-arrows-v !text-2xl"></i>
                </div>
                <span class="text-2xl font-bold">Requests</span>
                <span class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
</script>

API #

Animations

ClassProperty
animate-enteranimation-name: enter;
--p-enter-opacity: initial;
--p-enter-scale: initial;
--p-enter-rotate: initial;
--p-enter-translate-x: initial;
--p-enter-translate-y: initial;
animate-leaveanimation-name: leave;
--p-leave-opacity: initial;
--p-leave-scale: initial;
--p-leave-rotate: initial;
--p-leave-translate-x: initial;
--p-leave-translate-y: initial;
animate-leavefadein 0.15s linear
animate-fadeinfadein 0.15s linear
animate-fadeoutfadeout 0.15s linear
animate-slidedownslidedown 0.45s ease-in-out
animate-slideupslideup 0.45s cubic-bezier(0, 1, 0, 1)
animate-scaleinscalein 0.15s linear
animate-fadeinleftfadeinleft 0.15s linear
animate-fadeoutleftfadeoutleft 0.15s linear
animate-fadeinrightfadeinright 0.15s linear
animate-fadeoutrightfadeoutright 0.15s linear
animate-fadeinupfadeinup 0.15s linear
animate-fadeoutupfadeoutup 0.15s linear
animate-fadeindownfadeindown 0.15s linear
animate-fadeoutupfadeoutup 0.15s linear
animate-widthwidth 0.15s linear
animate-flipflip 0.15s linear
animate-flipupflipup 0.15s linear
animate-flipleftfadein 0.15s linear
animate-fliprightflipright 0.15s linear
animate-zoominzoomin 0.15s linear
animate-zoomindownzoomindown 0.15s linear
animate-zoominleftzoominleft 0.15s linear
animate-zoominrightzoominright 0.15s linear
animate-zoominupzoominup 0.15s linear

Animation Duration

ClassProperty
animate-duration-0animation-duration: 0s
animate-duration-75animation-duration: 75ms
animate-duration-100animation-duration: 100ms
animate-duration-200animation-duration: 200ms
animate-duration-300animation-duration: 300ms
animate-duration-400animation-duration: 400ms
animate-duration-500animation-duration: 500ms
animate-duration-700animation-duration: 700ms
animate-duration-1000animation-duration: 1000ms
animate-duration-2000animation-duration: 2000ms
animate-duration-3000animation-duration: 300ms
animate-duration-[value]animation-duration: value

Animation Delay

ClassProperty
animate-delay-noneanimation-duration: 0s
animate-delay-75animation-delay: 75ms
animate-delay-100animation-delay: 100ms
animate-delay-150animation-delay: 150ms
animate-delay-200animation-delay: 200ms
animate-delay-300animation-delay: 300ms
animate-delay-400animation-delay: 400ms
animate-delay-500animation-delay: 500ms
animate-delay-700animation-delay: 700ms
animate-delay-1000animation-delay: 1000ms

Iteration Count

ClassProperty
animate-infiniteanimation-iteration-count: infinite
animate-onceanimation-iteration-count: 1
animate-twiceanimation-iteration-count: 2

Direction

ClassProperty
animate-normalanimation-direction: normal
animate-reverseanimation-direction: reverse
animate-alternateanimation-direction: alternate
animate-alternate-reverseanimation-direction: alternate-reverse

Timing Function

ClassProperty
animate-ease-linearanimation-timing-function: linear
animate-ease-inanimation-timing-function: cubic-bezier(0.4, 0, 1, 1)
animate-ease-outanimation-timing-function: cubic-bezier(0, 0, 0.2, 1)
animate-ease-in-outanimation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)

Fill Mode

ClassProperty
animate-fill-noneanimation-fill-mode: normal
animate-fill-forwardsanimation-fill-mode: forwards
animate-fill-backwardsanimation-fill-mode: backwards
animate-fill-bothanimation-fill-mode: both

Play State

ClassProperty
animate-runninganimation-play-state: running
animate-pausedanimation-play-state: paused

Backface Visibility State

ClassProperty
backface-visiblebackface-visibility: visible
backface-hiddenbackface-visibility: hidden

Fade In and Out

Values are derived from the Tailwind CSS opacity e.g. fade-in-50 and fade-out-20. Arbitrary values such as fade-in-[15] are also supported.

ClassProperty
fade-in-{value}--p-enter-opacity: {value}
fade-out-{value}--p-leave-opacity: {value}

Zoom In and Out

Values are derived from the Tailwind CSS scale e.g. zoom-in-50 and zoom-out-75. Arbitrary values such as zoom-in-[0.8] are also supported.

ClassProperty
zoom-in-{value}--p-enter-scale: {value}
zoom-out-{value}--p-leave-scale: {value}

Spin In and Out

Values are derived from the Tailwind CSS rotate e.g. spin-in-45 and spin-out-90. Arbitrary values such as spin-in-[60deg] are also supported.

ClassProperty
spin-in-{value}--p-enter-rotate: {value}
spin-out-{value}--p-leave-rotate: {value}

Slide In and Out

Values are derived from the Tailwind CSS translate e.g. slide-in-from-t-50 and slide-out-to-l-8. Arbitrary values such as slide-in-from-b-[8px] are also supported.

ClassProperty
slide-in-from-t-{value}--p-enter-translate-y: -{value}
slide-in-from-b-{value}--p-enter-translate-y: {value}
slide-in-from-l-{value}--p-enter-translate-x: -{value}
slide-in-from-r-{value}--p-enter-translate-x: {value}
slide-out-to-t-{value}--p-leave-translate-y: -{value}
slide-out-to-b-{value}--p-leave-translate-y: {value}
slide-out-to-l-{value}--p-leave-translate-x: -{value}
slide-out-to-r-{value}--p-leave-translate-x: {value}
PrimeVue 4.3.3 by PrimeTek