vue-bits/src/demo/TextAnimations/ScrollFloatDemo.vue

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