Doc on animate scroll

components/lib/animateonscroll/AnimateOnScroll.d.ts

@@ -51,7 +51,7 @@ export interface AnimateOnScrollDirectivePassThroughOptions {
  */
 export interface AnimateOnScrollDirectiveModifiers {
     /**
-     * Whether the animation will be repeated
+     * Whether the scroll event listener should be removed after initial run.
      *  @defaultValue true
      */
     once?: boolean | undefined;

doc/animateonscroll/BasicDoc.vue

@@ -1,17 +1,21 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
+        <p>Animation classes are defined with the <i>enterClass</i> and <i>leaveClass</i> properties.</p>
-            AnimateOnScroll uses PrimeFlex animations, however it can perform animations with custom CSS classes too. Takes <i>enterClass</i> and <i>leaveClass</i> properties to simply add animation class during scroll or page load to manage elements
-            animation if the element is entering or leaving the viewport.
-        </p>
     </DocSectionText>
     <div class="card flex flex-column align-items-center">
-        <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">
+        <div class="flex flex-column align-items-center gap-2">
-            <span class="text-900 text-3xl font-bold">flip</span>
+            <span class="text-xl font-medium">Scroll Down</span>
+            <span class="slidedown-icon h-2rem w-2rem bg-primary border-circle inline-flex align-items-center justify-content-center">
+                <i class="pi pi-arrow-down" />
+            </span>
         </div>
         <div class="h-30rem"></div>
-        <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">
+        <div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-2000">
-            <span class="text-900 text-3xl font-bold">flip up</span>
+            <span class="text-3xl font-bold">fade-in</span>
+        </div>
+        <div class="h-30rem"></div>
+        <div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-2000">
+            <span class="text-3xl font-bold">fade-left</span>
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -63,3 +67,25 @@ export default {
     }
 };
 </script>
+
+<style scoped>
+@keyframes slidedown-icon {
+    0% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(20px);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+.slidedown-icon {
+    animation: slidedown-icon;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+}
+</style>

doc/animateonscroll/OnceDoc.vue

@@ -1,46 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>once</i> modifiers are added to an AnimateOnScroll, it works only once.</p>
-    </DocSectionText>
-    <div class="card flex flex-column align-items-center">
-        <div v-animateonscroll.once="{ 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>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<div class="card flex flex-column align-items-center">
-    <div v-animateonscroll.once="{ 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>
-`,
-                options: `
-<template>
-    <div class="card flex flex-column align-items-center">
-        <div v-animateonscroll.once="{ 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>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex flex-column align-items-center">
-        <div v-animateonscroll.once="{ 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>
-</template>`
-            }
-        };
-    }
-};
-</script>

doc/common/apidoc/index.json

@@ -920,7 +920,7 @@
                             "readonly": false,
                             "type": "boolean",
                             "default": "true",
-                            "description": "Whether the animation will be repeated"
+                            "description": "Whether the scroll event should be removed after initial run."
                         }
                     ],
                     "methods": []

pages/animateonscroll/index.vue

@@ -2,7 +2,7 @@
     <DocComponent
         title="Vue AnimateOnScroll Directive"
         header="AnimateOnScroll"
-        description="AnimateOnScroll manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load."
+        description="AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling."
         :componentDocs="docs"
         :apiDocs="['AnimateOnScroll']"
     />
@@ -12,7 +12,6 @@
 import AccessibilityDoc from '@/doc/animateonscroll/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/animateonscroll/BasicDoc.vue';
 import ImportDoc from '@/doc/animateonscroll/ImportDoc.vue';
-import OnceDoc from '@/doc/animateonscroll/OnceDoc.vue';
 
 export default {
     data() {
@@ -28,11 +27,6 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
-                {
-                    id: 'once',
-                    label: 'Once',
-                    component: OnceDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',