From ea8a04eb3bccd15bf2aae8aa8e4a0e1b309e7c8f Mon Sep 17 00:00:00 2001
From: zubairrafi <walleeva2018@gmail.com>
Date: Sat, 12 Jul 2025 02:44:24 +0600
Subject: [PATCH 1/3] Scroll Float added in text animation section

Signed-off-by: zubairrafi <walleeva2018@gmail.com>
---
 src/constants/Categories.ts                   |   1 +
 src/constants/Components.ts                   |   1 +
 .../code/Components/scrollFloatCode.ts        |  25 +++
 .../ScrollFloat/ScrollFloat.vue               | 141 +++++++++++++
 src/demo/TextAnimations/ScrollFloatDemo.vue   | 191 ++++++++++++++++++
 5 files changed, 359 insertions(+)
 create mode 100644 src/constants/code/Components/scrollFloatCode.ts
 create mode 100644 src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
 create mode 100644 src/demo/TextAnimations/ScrollFloatDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 9234c53..6dae674 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -19,6 +19,7 @@ export const CATEGORIES = [
       'Falling Text',
       'Text Cursor',
       'Decrypted Text',
+      'Scroll Float'
     ]
   },
   {
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index d1c9376..ea07b7e 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -23,6 +23,7 @@ const textAnimations = {
   'falling-text': () => import("../demo/TextAnimations/FallingTextDemo.vue"),
   'text-cursor': () => import("../demo/TextAnimations/TextCursorDemo.vue"),
   'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
+  'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
 };
 
 const components = {
diff --git a/src/constants/code/Components/scrollFloatCode.ts b/src/constants/code/Components/scrollFloatCode.ts
new file mode 100644
index 0000000..d4cd34b
--- /dev/null
+++ b/src/constants/code/Components/scrollFloatCode.ts
@@ -0,0 +1,25 @@
+import code from '@content/TextAnimations/ScrollFloat/ScrollFloat.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const scrollFloatCode: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ProfileCard`,
+  usage: `<template>
+  <ScrollFloat
+    :children="scrollText"
+    :animation-duration="animationDuration"
+    :ease="ease"
+    :scroll-start="scrollStart"
+    :scroll-end="scrollEnd"
+    :stagger="stagger"
+    :container-class-name="containerClassName"
+    :text-class-name="textClassName"
+    :scroll-container-ref="{ current: containerRef }"
+    :key="rerenderKey"
+  />
+</template>
+
+<script setup lang="ts">
+  import ScrollFloat from "./ScrollFloat.vue";
+</script>`,
+  code
+}
\ No newline at end of file
diff --git a/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
new file mode 100644
index 0000000..b12e5a4
--- /dev/null
+++ b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
@@ -0,0 +1,141 @@
+<template>
+    <h2 ref="containerRef" :class="`scroll-float ${containerClassName}`">
+      <span :class="`scroll-float-text ${textClassName}`">
+        <span
+          v-for="(char, index) in splitText"
+          :key="index"
+          class="char"
+        >
+          {{ char === " " ? "\u00A0" : char }}
+        </span>
+      </span>
+    </h2>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+  import { gsap } from 'gsap';
+  import { ScrollTrigger } from 'gsap/ScrollTrigger';
+  
+  gsap.registerPlugin(ScrollTrigger);
+  
+  interface Props {
+    children: string;
+    scrollContainerRef?: { current: HTMLElement | null };
+    containerClassName?: string;
+    textClassName?: string;
+    animationDuration?: number;
+    ease?: string;
+    scrollStart?: string;
+    scrollEnd?: string;
+    stagger?: number;
+  }
+  
+  const props = withDefaults(defineProps<Props>(), {
+    containerClassName: '',
+    textClassName: '',
+    animationDuration: 1,
+    ease: 'back.inOut(2)',
+    scrollStart: 'center bottom+=50%',
+    scrollEnd: 'bottom bottom-=40%',
+    stagger: 0.03
+  });
+  
+  const containerRef = ref<HTMLElement | null>(null);
+  let scrollTriggerInstance: ScrollTrigger | null = null;
+  
+  const splitText = computed(() => {
+    const text = typeof props.children === 'string' ? props.children : '';
+    return text.split("");
+  });
+  
+  const initializeAnimation = () => {
+    const el = containerRef.value;
+    if (!el) return;
+  
+    const scroller =
+      props.scrollContainerRef && props.scrollContainerRef.current
+        ? props.scrollContainerRef.current
+        : window;
+  
+    const charElements = el.querySelectorAll('.char');
+  
+    if (scrollTriggerInstance) {
+      scrollTriggerInstance.kill();
+    }
+  
+    const tl = gsap.fromTo(
+      charElements,
+      {
+        willChange: 'opacity, transform',
+        opacity: 0,
+        yPercent: 120,
+        scaleY: 2.3,
+        scaleX: 0.7,
+        transformOrigin: '50% 0%'
+      },
+      {
+        duration: props.animationDuration,
+        ease: props.ease,
+        opacity: 1,
+        yPercent: 0,
+        scaleY: 1,
+        scaleX: 1,
+        stagger: props.stagger,
+        scrollTrigger: {
+          trigger: el,
+          scroller,
+          start: props.scrollStart,
+          end: props.scrollEnd,
+          scrub: true
+        }
+      }
+    );
+  
+    scrollTriggerInstance = tl.scrollTrigger || null;
+  };
+  
+  onMounted(() => {
+    initializeAnimation();
+  });
+  
+  onUnmounted(() => {
+    if (scrollTriggerInstance) {
+      scrollTriggerInstance.kill();
+    }
+  });
+  
+  watch(
+    [
+      () => props.children,
+      () => props.scrollContainerRef,
+      () => props.animationDuration,
+      () => props.ease,
+      () => props.scrollStart,
+      () => props.scrollEnd,
+      () => props.stagger
+    ],
+    () => {
+      initializeAnimation();
+    },
+    { deep: true }
+  );
+  </script>
+  
+  <style scoped>
+  .scroll-float {
+    overflow: hidden;
+  }
+  
+  .scroll-float-text {
+    display: inline-block;
+    font-size: clamp(1.6rem, 8vw, 10rem);
+    font-weight: 900;
+    text-align: center;
+    line-height: 1.5;
+  }
+  
+  .char {
+    display: inline-block;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/demo/TextAnimations/ScrollFloatDemo.vue b/src/demo/TextAnimations/ScrollFloatDemo.vue
new file mode 100644
index 0000000..fc0eda0
--- /dev/null
+++ b/src/demo/TextAnimations/ScrollFloatDemo.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="profile-card-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div 
+          ref="containerRef"
+          class="demo-container"
+          @wheel="smoothScroll"
+        >
+       
+          <div class="scroll-instruction">
+            Scroll Down
+          </div>
+          
+          <div class="scroll-content">
+            <ScrollFloat
+              :children="scrollText"
+              :animation-duration="animationDuration"
+              :ease="ease"
+              :scroll-start="scrollStart"
+              :scroll-end="scrollEnd"
+              :stagger="stagger"
+              :container-class-name="containerClassName"
+              :text-class-name="textClassName"
+              :scroll-container-ref="{ current: containerRef }"
+              :key="rerenderKey"
+            />
+          </div>
+        </div>
+
+        <Customize>
+        
+            <PreviewSlider title="Stagger:" v-model="stagger" :min="0.01" :max="0.1" :step="0.01" value-unit="s" />
+            <PreviewSlider title="Animation Duration:" v-model="animationDuration" :min="1" :max="10" :step="0.1" value-unit="s" />
+            
+
+        </Customize>
+
+        <PropTable :data="propData" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="scrollFloatCode" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="scrollFloatCode.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { gsap } from 'gsap'
+import TabbedLayout from '../../components/common/TabbedLayout.vue'
+import PropTable from '../../components/common/PropTable.vue'
+import CliInstallation from '../../components/code/CliInstallation.vue'
+import CodeExample from '../../components/code/CodeExample.vue'
+import Customize from '../../components/common/Customize.vue'
+import ScrollFloat from '../../content/TextAnimations/ScrollFloat/ScrollFloat.vue'
+import PreviewSlider from '../../components/common/PreviewSlider.vue'
+import { scrollFloatCode } from '@/constants/code/Components/scrollFloatCode'
+
+
+const containerRef = ref<HTMLElement | null>(null)
+const scrollText = ref("vuebits")
+const animationDuration = ref(1)
+const ease = ref('back.inOut(2)')
+const scrollStart = ref('center bottom+=50%')
+const scrollEnd = ref('bottom bottom-=40%')
+const stagger = ref(0.03)
+const containerClassName = ref("")
+const textClassName = ref("")
+const rerenderKey = ref(0)
+
+
+const smoothScroll = (e: WheelEvent) => {
+  e.preventDefault()
+  const container = containerRef.value
+  if (!container) return
+
+  const delta = e.deltaY || e.detail
+  const scrollAmount = delta * 2
+  
+  gsap.to(container, {
+    scrollTop: container.scrollTop + scrollAmount,
+    duration: 2,
+    ease: "power3.out",
+    overwrite: "auto"
+  })
+}
+
+
+onMounted(() => {
+  const container = containerRef.value
+  if (container) {
+    container.addEventListener('wheel', smoothScroll, { passive: false })
+  }
+})
+
+onUnmounted(() => {
+  const container = containerRef.value
+  if (container) {
+    container.removeEventListener('wheel', smoothScroll)
+  }
+})
+
+const propData = [
+  {
+    name: 'children',
+    type: 'string',
+    default: '""',
+    description: 'The text content to be animated character by character'
+  },
+  {
+    name: 'scrollContainerRef',
+    type: 'object',
+    default: 'undefined',
+    description: 'Ref to a custom scroll container (defaults to window)'
+  },
+  {
+    name: 'containerClassName',
+    type: 'string',
+    default: '""',
+    description: 'Additional CSS classes for the container element'
+  },
+  {
+    name: 'textClassName',
+    type: 'string',
+    default: '""',
+    description: 'Additional CSS classes for the text element'
+  },
+  {
+    name: 'animationDuration',
+    type: 'number',
+    default: '1',
+    description: 'Duration of the animation in seconds'
+  },
+  {
+    name: 'ease',
+    type: 'string',
+    default: '"back.inOut(2)"',
+    description: 'GSAP easing function for the animation'
+  },
+  {
+    name: 'scrollStart',
+    type: 'string',
+    default: '"center bottom+=50%"',
+    description: 'ScrollTrigger start position'
+  },
+  {
+    name: 'scrollEnd',
+    type: 'string',
+    default: '"bottom bottom-=40%"',
+    description: 'ScrollTrigger end position'
+  },
+  {
+    name: 'stagger',
+    type: 'number',
+    default: '0.03',
+    description: 'Delay between each character animation'
+  }
+]
+</script>
+<style scoped>
+.demo-container {
+  height: 60vh ;
+  overflow-y: auto;
+}
+
+.scroll-content {
+  padding-top: 150vh !important; 
+  padding-bottom: 50vh;
+}
+.scroll-instruction {
+  text-align: center;
+  color: #271E37;
+  font-size: clamp(4rem, 6vw, 4rem);
+  font-weight: 900;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+}
+.scroll-content{
+  color: aliceblue;
+}
+
+</style>
\ No newline at end of file

From 936bca258a64682dbce501ebde85d851edc816fe Mon Sep 17 00:00:00 2001
From: zubairrafi <walleeva2018@gmail.com>
Date: Sat, 12 Jul 2025 11:26:58 +0600
Subject: [PATCH 2/3] Issue resolved

Signed-off-by: zubairrafi <walleeva2018@gmail.com>
---
 .../code/Components/scrollFloatCode.ts        |   2 +-
 .../ScrollFloat/ScrollFloat.vue               | 252 ++++++++----------
 src/demo/TextAnimations/ScrollFloatDemo.vue   |   2 -
 3 files changed, 118 insertions(+), 138 deletions(-)

diff --git a/src/constants/code/Components/scrollFloatCode.ts b/src/constants/code/Components/scrollFloatCode.ts
index d4cd34b..f7bba6c 100644
--- a/src/constants/code/Components/scrollFloatCode.ts
+++ b/src/constants/code/Components/scrollFloatCode.ts
@@ -2,7 +2,7 @@ import code from '@content/TextAnimations/ScrollFloat/ScrollFloat.vue?raw'
 import type { CodeObject } from '../../../types/code'
 
 export const scrollFloatCode: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ProfileCard`,
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollFloat`,
   usage: `<template>
   <ScrollFloat
     :children="scrollText"
diff --git a/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
index b12e5a4..6aad9af 100644
--- a/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
+++ b/src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
@@ -1,141 +1,123 @@
 <template>
-    <h2 ref="containerRef" :class="`scroll-float ${containerClassName}`">
-      <span :class="`scroll-float-text ${textClassName}`">
-        <span
-          v-for="(char, index) in splitText"
-          :key="index"
-          class="char"
-        >
-          {{ char === " " ? "\u00A0" : char }}
-        </span>
+  <h2 ref="containerRef" :class="`overflow-hidden ${containerClassName}`">
+    <span :class="`inline-block text-center leading-relaxed font-black ${textClassName}`" style="font-size: clamp(1.6rem, 8vw, 10rem);">
+      <span
+        v-for="(char, index) in splitText"
+        :key="index"
+        class="inline-block char"
+      >
+        {{ char === " " ? "\u00A0" : char }}
       </span>
-    </h2>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-  import { gsap } from 'gsap';
-  import { ScrollTrigger } from 'gsap/ScrollTrigger';
-  
-  gsap.registerPlugin(ScrollTrigger);
-  
-  interface Props {
-    children: string;
-    scrollContainerRef?: { current: HTMLElement | null };
-    containerClassName?: string;
-    textClassName?: string;
-    animationDuration?: number;
-    ease?: string;
-    scrollStart?: string;
-    scrollEnd?: string;
-    stagger?: number;
+    </span>
+  </h2>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface Props {
+  children: string;
+  scrollContainerRef?: { current: HTMLElement | null };
+  containerClassName?: string;
+  textClassName?: string;
+  animationDuration?: number;
+  ease?: string;
+  scrollStart?: string;
+  scrollEnd?: string;
+  stagger?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  containerClassName: '',
+  textClassName: '',
+  animationDuration: 1,
+  ease: 'back.inOut(2)',
+  scrollStart: 'center bottom+=50%',
+  scrollEnd: 'bottom bottom-=40%',
+  stagger: 0.03
+});
+
+const containerRef = ref<HTMLElement | null>(null);
+let scrollTriggerInstance: ScrollTrigger | null = null;
+
+const splitText = computed(() => {
+  const text = typeof props.children === 'string' ? props.children : '';
+  return text.split("");
+});
+
+const initializeAnimation = () => {
+  const el = containerRef.value;
+  if (!el) return;
+
+  const scroller =
+    props.scrollContainerRef && props.scrollContainerRef.current
+      ? props.scrollContainerRef.current
+      : window;
+
+  const charElements = el.querySelectorAll('.char');
+
+  if (scrollTriggerInstance) {
+    scrollTriggerInstance.kill();
   }
-  
-  const props = withDefaults(defineProps<Props>(), {
-    containerClassName: '',
-    textClassName: '',
-    animationDuration: 1,
-    ease: 'back.inOut(2)',
-    scrollStart: 'center bottom+=50%',
-    scrollEnd: 'bottom bottom-=40%',
-    stagger: 0.03
-  });
-  
-  const containerRef = ref<HTMLElement | null>(null);
-  let scrollTriggerInstance: ScrollTrigger | null = null;
-  
-  const splitText = computed(() => {
-    const text = typeof props.children === 'string' ? props.children : '';
-    return text.split("");
-  });
-  
-  const initializeAnimation = () => {
-    const el = containerRef.value;
-    if (!el) return;
-  
-    const scroller =
-      props.scrollContainerRef && props.scrollContainerRef.current
-        ? props.scrollContainerRef.current
-        : window;
-  
-    const charElements = el.querySelectorAll('.char');
-  
-    if (scrollTriggerInstance) {
-      scrollTriggerInstance.kill();
-    }
-  
-    const tl = gsap.fromTo(
-      charElements,
-      {
-        willChange: 'opacity, transform',
-        opacity: 0,
-        yPercent: 120,
-        scaleY: 2.3,
-        scaleX: 0.7,
-        transformOrigin: '50% 0%'
-      },
-      {
-        duration: props.animationDuration,
-        ease: props.ease,
-        opacity: 1,
-        yPercent: 0,
-        scaleY: 1,
-        scaleX: 1,
-        stagger: props.stagger,
-        scrollTrigger: {
-          trigger: el,
-          scroller,
-          start: props.scrollStart,
-          end: props.scrollEnd,
-          scrub: true
-        }
-      }
-    );
-  
-    scrollTriggerInstance = tl.scrollTrigger || null;
-  };
-  
-  onMounted(() => {
-    initializeAnimation();
-  });
-  
-  onUnmounted(() => {
-    if (scrollTriggerInstance) {
-      scrollTriggerInstance.kill();
-    }
-  });
-  
-  watch(
-    [
-      () => props.children,
-      () => props.scrollContainerRef,
-      () => props.animationDuration,
-      () => props.ease,
-      () => props.scrollStart,
-      () => props.scrollEnd,
-      () => props.stagger
-    ],
-    () => {
-      initializeAnimation();
+
+  const tl = gsap.fromTo(
+    charElements,
+    {
+      willChange: 'opacity, transform',
+      opacity: 0,
+      yPercent: 120,
+      scaleY: 2.3,
+      scaleX: 0.7,
+      transformOrigin: '50% 0%'
     },
-    { deep: true }
+    {
+      duration: props.animationDuration,
+      ease: props.ease,
+      opacity: 1,
+      yPercent: 0,
+      scaleY: 1,
+      scaleX: 1,
+      stagger: props.stagger,
+      scrollTrigger: {
+        trigger: el,
+        scroller,
+        start: props.scrollStart,
+        end: props.scrollEnd,
+        scrub: true
+      }
+    }
   );
-  </script>
-  
-  <style scoped>
-  .scroll-float {
-    overflow: hidden;
+
+  scrollTriggerInstance = tl.scrollTrigger || null;
+};
+
+onMounted(() => {
+  initializeAnimation();
+});
+
+onUnmounted(() => {
+  if (scrollTriggerInstance) {
+    scrollTriggerInstance.kill();
   }
-  
-  .scroll-float-text {
-    display: inline-block;
-    font-size: clamp(1.6rem, 8vw, 10rem);
-    font-weight: 900;
-    text-align: center;
-    line-height: 1.5;
-  }
-  
-  .char {
-    display: inline-block;
-  }
-  </style>
\ No newline at end of file
+});
+
+watch(
+  [
+    () => props.children,
+    () => props.scrollContainerRef,
+    () => props.animationDuration,
+    () => props.ease,
+    () => props.scrollStart,
+    () => props.scrollEnd,
+    () => props.stagger
+  ],
+  () => {
+    initializeAnimation();
+  },
+  { deep: true }
+);
+</script>
\ No newline at end of file
diff --git a/src/demo/TextAnimations/ScrollFloatDemo.vue b/src/demo/TextAnimations/ScrollFloatDemo.vue
index fc0eda0..82cbb4f 100644
--- a/src/demo/TextAnimations/ScrollFloatDemo.vue
+++ b/src/demo/TextAnimations/ScrollFloatDemo.vue
@@ -1,5 +1,4 @@
 <template>
-  <div class="profile-card-demo">
     <TabbedLayout>
       <template #preview>
         <div 
@@ -47,7 +46,6 @@
         <CliInstallation :command="scrollFloatCode.cli" />
       </template>
     </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">

From ecaa5369b5678c10dddf6f603574cfa8f9772566 Mon Sep 17 00:00:00 2001
From: zubairrafi <walleeva2018@gmail.com>
Date: Sat, 12 Jul 2025 12:48:43 +0600
Subject: [PATCH 3/3] Fixed file location, scroll float should be under text
 animation

Signed-off-by: zubairrafi <walleeva2018@gmail.com>
---
 .../code/{Components => TextAnimations}/scrollFloatCode.ts      | 0
 src/demo/TextAnimations/ScrollFloatDemo.vue                     | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/constants/code/{Components => TextAnimations}/scrollFloatCode.ts (100%)

diff --git a/src/constants/code/Components/scrollFloatCode.ts b/src/constants/code/TextAnimations/scrollFloatCode.ts
similarity index 100%
rename from src/constants/code/Components/scrollFloatCode.ts
rename to src/constants/code/TextAnimations/scrollFloatCode.ts
diff --git a/src/demo/TextAnimations/ScrollFloatDemo.vue b/src/demo/TextAnimations/ScrollFloatDemo.vue
index 82cbb4f..c751f47 100644
--- a/src/demo/TextAnimations/ScrollFloatDemo.vue
+++ b/src/demo/TextAnimations/ScrollFloatDemo.vue
@@ -58,7 +58,7 @@ import CodeExample from '../../components/code/CodeExample.vue'
 import Customize from '../../components/common/Customize.vue'
 import ScrollFloat from '../../content/TextAnimations/ScrollFloat/ScrollFloat.vue'
 import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import { scrollFloatCode } from '@/constants/code/Components/scrollFloatCode'
+import { scrollFloatCode } from '@/constants/code/TextAnimations/scrollFloatCode'
 
 
 const containerRef = ref<HTMLElement | null>(null)