Scroll Float added in text animation section

Signed-off-by: zubairrafi <walleeva2018@gmail.com>

src/constants/Categories.ts

@@ -19,6 +19,7 @@ export const CATEGORIES = [
       'Falling Text',
       'Text Cursor',
       'Decrypted Text',
+      'Scroll Float'
     ]
   },
   {

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 = {

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
+}

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>

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>