Merge pull request #4 from walleeva2018/feat/scroll-float

Scroll Float added in text animation section

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/TextAnimations/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/TextAnimations/ScrollFloat`,
+  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,123 @@
+<template>
+  <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>
+    </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>

src/demo/TextAnimations/ScrollFloatDemo.vue

@@ -0,0 +1,189 @@
+<template>
+    <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>
+</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/TextAnimations/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>