diff --git a/doc/animate/BasicDoc.vue b/doc/animateonscroll/BasicDoc.vue
similarity index 51%
rename from doc/animate/BasicDoc.vue
rename to doc/animateonscroll/BasicDoc.vue
index dd051aee9..371e27af6 100644
--- a/doc/animate/BasicDoc.vue
+++ b/doc/animateonscroll/BasicDoc.vue
@@ -6,11 +6,11 @@
         </p>
     </DocSectionText>
     <div class="card flex flex-column align-items-center">
-        <div v-animate="{ 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">
+        <div v-animateonscroll="{ 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>
         <div class="h-30rem"></div>
-        <div v-animate="{ enterClass: 'flipup' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
+        <div v-animateonscroll="{ enterClass: 'flipup' }" 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 up</span>
         </div>
     </div>
@@ -24,11 +24,11 @@ export default {
             code: {
                 basic: `
 <div class="card flex flex-column align-items-center">
-    <div v-animate="{ 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">
+    <div v-animateonscroll="{ 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>
     <div class="h-30rem"></div>
-    <div v-animate="{ enterClass: 'flipup' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
+    <div v-animateonscroll="{ enterClass: 'flipup' }" 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 up</span>
     </div>
 </div>
@@ -36,11 +36,11 @@ export default {
                 options: `
 <template>
     <div class="card flex flex-column align-items-center">
-        <div v-animate="{ 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">
+        <div v-animateonscroll="{ 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>
         <div class="h-30rem"></div>
-        <div v-animate="{ enterClass: 'flipup' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
+        <div v-animateonscroll="{ enterClass: 'flipup' }" 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 up</span>
         </div>
     </div>
@@ -49,11 +49,11 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center">
-        <div v-animate="{ 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">
+        <div v-animateonscroll="{ 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>
         <div class="h-30rem"></div>
-        <div v-animate="{ enterClass: 'flipup' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
+        <div v-animateonscroll="{ enterClass: 'flipup' }" 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 up</span>
         </div>
     </div>
diff --git a/doc/animate/ImportDoc.vue b/doc/animateonscroll/ImportDoc.vue
similarity index 74%
rename from doc/animate/ImportDoc.vue
rename to doc/animateonscroll/ImportDoc.vue
index 91a9bb45d..ec1b5620a 100644
--- a/doc/animate/ImportDoc.vue
+++ b/doc/animateonscroll/ImportDoc.vue
@@ -9,9 +9,9 @@ export default {
         return {
             code: {
                 basic: `
-import Animate from 'primevue/animate';
+import AnimateOnScroll from 'primevue/animateonscroll';
                 
-app.directive('animate', Animate);
+app.directive('animateonscroll', AnimateOnScroll);
 `
             }
         };
diff --git a/pages/animate/index.vue b/pages/animateonscroll/index.vue
similarity index 51%
rename from pages/animate/index.vue
rename to pages/animateonscroll/index.vue
index a0e39ea31..5e3530e8f 100644
--- a/pages/animate/index.vue
+++ b/pages/animateonscroll/index.vue
@@ -1,10 +1,16 @@
 <template>
-    <DocComponent title="Vue Animate Directive" header="Animate" description="Animate manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load." :componentDocs="docs" :apiDocs="['Animate']" />
+    <DocComponent
+        title="Vue AnimateOnScroll Directive"
+        header="Animate"
+        description="AnimateOnScroll manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load."
+        :componentDocs="docs"
+        :apiDocs="['Animate']"
+    />
 </template>
 
 <script>
-import BasicDoc from '@/doc/animate/BasicDoc.vue';
-import ImportDoc from '@/doc/animate/ImportDoc.vue';
+import BasicDoc from '@/doc/animateonscroll/BasicDoc.vue';
+import ImportDoc from '@/doc/animateonscroll/ImportDoc.vue';
 
 export default {
     data() {
diff --git a/pages/landing/FeaturesSection.vue b/pages/landing/FeaturesSection.vue
index 188bcbd99..5e2d432cc 100644
--- a/pages/landing/FeaturesSection.vue
+++ b/pages/landing/FeaturesSection.vue
@@ -6,56 +6,56 @@
             <div class="features-container">
                 <div class="grid">
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3" />
                             <div class="font-semibold mb-3 text-lg">80+ UI Components</div>
                             <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 80+ impressive Vue Components.</p>
                         </div>
                     </div>
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3" />
                             <div class="font-semibold mb-3 text-lg">Styled or Unstyled</div>
                             <p class="m-0 text-secondary font-medium">Choose from a variety of pre-built themes or implement your design systems with the CSS library of your choice like TailwindCSS.</p>
                         </div>
                     </div>
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3" />
                             <div class="font-semibold mb-3 text-lg">Community</div>
                             <p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
                         </div>
                     </div>
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3" />
                             <div class="font-semibold mb-3 text-lg">Accessibility</div>
                             <p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
                         </div>
                     </div>
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3" />
                             <div class="font-semibold mb-3 text-lg">Enterprise Support</div>
                             <p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
                         </div>
                     </div>
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3" />
                             <div class="font-semibold mb-3 text-lg">Mobile</div>
                             <p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
                         </div>
                     </div>
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3" />
                             <div class="font-semibold mb-3 text-lg">Blocks</div>
                             <p class="m-0 text-secondary font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p>
                         </div>
                     </div>
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
-                        <div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
+                        <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
                             <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3" />
                             <div class="font-semibold mb-3 text-lg">Typescript</div>
                             <p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>