From 314856a4e3ccf02205b86d8dd46bed76fdbd7102 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 25 Oct 2023 07:01:16 +0300
Subject: [PATCH] Doc on animate scroll

---
 .../lib/animateonscroll/AnimateOnScroll.d.ts  |  2 +-
 doc/animateonscroll/BasicDoc.vue              | 42 +++++++++++++----
 doc/animateonscroll/OnceDoc.vue               | 46 -------------------
 doc/common/apidoc/index.json                  |  4 +-
 pages/animateonscroll/index.vue               |  8 +---
 5 files changed, 38 insertions(+), 64 deletions(-)
 delete mode 100644 doc/animateonscroll/OnceDoc.vue

diff --git a/components/lib/animateonscroll/AnimateOnScroll.d.ts b/components/lib/animateonscroll/AnimateOnScroll.d.ts
index 1592a66fd..e472b2312 100644
--- a/components/lib/animateonscroll/AnimateOnScroll.d.ts
+++ b/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;
diff --git a/doc/animateonscroll/BasicDoc.vue b/doc/animateonscroll/BasicDoc.vue
index c3b8e5892..514bfb276 100644
--- a/doc/animateonscroll/BasicDoc.vue
+++ b/doc/animateonscroll/BasicDoc.vue
@@ -1,17 +1,21 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <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>
+        <p>Animation classes are defined with the <i>enterClass</i> and <i>leaveClass</i> properties.</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">
-            <span class="text-900 text-3xl font-bold">flip</span>
+        <div class="flex flex-column align-items-center gap-2">
+            <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">
-            <span class="text-900 text-3xl font-bold">flip up</span>
+        <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-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>
diff --git a/doc/animateonscroll/OnceDoc.vue b/doc/animateonscroll/OnceDoc.vue
deleted file mode 100644
index 8ce92e610..000000000
--- a/doc/animateonscroll/OnceDoc.vue
+++ /dev/null
@@ -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>
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 18dd963e1..ebcca9e0b 100644
--- a/doc/common/apidoc/index.json
+++ b/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": []
@@ -55870,4 +55870,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/pages/animateonscroll/index.vue b/pages/animateonscroll/index.vue
index 254572bff..1044b8b20 100644
--- a/pages/animateonscroll/index.vue
+++ b/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',