Merge pull request #9 from walleeva2018/feat/scroll-reveal

Scroll Reveal added to text animations

src/constants/Categories.ts

@@ -20,7 +20,8 @@ export const CATEGORIES = [
       'Text Cursor',
       'Decrypted Text',
       'True Focus',
-      'Scroll Float'
+      'Scroll Float',
+      'Scroll Reveal'
     ]
   },
   {

src/constants/Components.ts

@@ -11,20 +11,21 @@ const animations = {
 };
 
 const textAnimations = {
-  'split-text': () => import('../demo/TextAnimations/SplitTextDemo.vue'),
-  'blur-text': () => import('../demo/TextAnimations/BlurTextDemo.vue'),
-  'circular-text': () => import('../demo/TextAnimations/CircularTextDemo.vue'),
-  'shiny-text': () => import('../demo/TextAnimations/ShinyTextDemo.vue'),
-  'text-pressure': () => import('../demo/TextAnimations/TextPressureDemo.vue'),
-  'curved-loop': () => import('../demo/TextAnimations/CurvedLoopDemo.vue'),
-  'fuzzy-text': () => import('../demo/TextAnimations/FuzzyTextDemo.vue'),
-  'gradient-text': () => import('../demo/TextAnimations/GradientTextDemo.vue'),
-  'text-trail': () => import('../demo/TextAnimations/TextTrailDemo.vue'),
-  'falling-text': () => import('../demo/TextAnimations/FallingTextDemo.vue'),
-  'text-cursor': () => import('../demo/TextAnimations/TextCursorDemo.vue'),
-  'decrypted-text': () => import('../demo/TextAnimations/DecryptedTextDemo.vue'),
-  'true-focus': () => import('../demo/TextAnimations/TrueFocusDemo.vue'),
-  'scroll-float': () => import('../demo/TextAnimations/ScrollFloatDemo.vue')
+  'split-text': () => import("../demo/TextAnimations/SplitTextDemo.vue"),
+  'blur-text': () => import("../demo/TextAnimations/BlurTextDemo.vue"),
+  'circular-text': () => import("../demo/TextAnimations/CircularTextDemo.vue"),
+  'shiny-text': () => import("../demo/TextAnimations/ShinyTextDemo.vue"),
+  'text-pressure': () => import("../demo/TextAnimations/TextPressureDemo.vue"),
+  'curved-loop': () => import("../demo/TextAnimations/CurvedLoopDemo.vue"),
+  'fuzzy-text': () => import("../demo/TextAnimations/FuzzyTextDemo.vue"),
+  'gradient-text': () => import("../demo/TextAnimations/GradientTextDemo.vue"),
+  'text-trail': () => import("../demo/TextAnimations/TextTrailDemo.vue"),
+  'falling-text': () => import("../demo/TextAnimations/FallingTextDemo.vue"),
+  'text-cursor': () => import("../demo/TextAnimations/TextCursorDemo.vue"),
+  'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
+  'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
+  'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
+  'scroll-reveal': ()=> import("../demo/TextAnimations/ScrollRevealDemo.vue")
 };
 
 const components = {

src/constants/code/TextAnimations/scrollRevealCode.ts

@@ -0,0 +1,26 @@
+import code from '@content/TextAnimations/ScrollReveal/ScrollReveal.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const scrollRevealCode: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollReveal`,
+  usage: `<template>
+    <ScrollReveal
+      :children="scrollText"
+      :enable-blur="enableBlur"
+      :base-opacity="baseOpacity"
+      :base-rotation="baseRotation"
+      :blur-strength="blurStrength"
+      :container-class-name="containerClassName"
+      :text-class-name="textClassName"
+      :rotation-end="rotationEnd"
+      :word-animation-end="wordAnimationEnd"
+      :scroll-container-ref="{ current: containerRef }"
+      :key="rerenderKey"
+    />
+</template>
+
+<script setup lang="ts">
+  import ScrollReveal from "./ScrollReveal.vue";
+</script>`,
+  code
+}

src/content/TextAnimations/ScrollReveal/ScrollReveal.vue

@@ -0,0 +1,165 @@
+<template>
+    <h2 ref="containerRef" :class="`my-5 ${containerClassName}`">
+      <p 
+        :class="`leading-relaxed font-semibold ${textClassName}`"
+        style="font-size: clamp(1.6rem, 4vw, 3rem);"
+      >
+        <span 
+          v-for="(word, index) in splitText" 
+          :key="index"
+          :class="word.isWhitespace ? '' : 'inline-block word'"
+        >
+          {{ word.text }}
+        </span>
+      </p>
+    </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 };
+    enableBlur?: boolean;
+    baseOpacity?: number;
+    baseRotation?: number;
+    blurStrength?: number;
+    containerClassName?: string;
+    textClassName?: string;
+    rotationEnd?: string;
+    wordAnimationEnd?: string;
+  }
+  
+  const props = withDefaults(defineProps<Props>(), {
+    enableBlur: true,
+    baseOpacity: 0.1,
+    baseRotation: 3,
+    blurStrength: 4,
+    containerClassName: '',
+    textClassName: '',
+    rotationEnd: 'bottom bottom',
+    wordAnimationEnd: 'bottom bottom'
+  });
+  
+  const containerRef = ref<HTMLElement | null>(null);
+  let scrollTriggerInstances: ScrollTrigger[] = [];
+  
+  const splitText = computed(() => {
+    const text = typeof props.children === 'string' ? props.children : '';
+    return text.split(/(\s+)/).map((word, index) => ({
+      text: word,
+      isWhitespace: word.match(/^\s+$/) !== null,
+      key: index
+    }));
+  });
+  
+  const initializeAnimation = () => {
+    const el = containerRef.value;
+    if (!el) return;
+  
+    scrollTriggerInstances.forEach(trigger => trigger.kill());
+    scrollTriggerInstances = [];
+  
+    const scroller =
+      props.scrollContainerRef && props.scrollContainerRef.current
+        ? props.scrollContainerRef.current
+        : window;
+  
+    const rotationTl = gsap.fromTo(
+      el,
+      { transformOrigin: '0% 50%', rotate: props.baseRotation },
+      {
+        ease: 'none',
+        rotate: 0,
+        scrollTrigger: {
+          trigger: el,
+          scroller,
+          start: 'top bottom',
+          end: props.rotationEnd,
+          scrub: true,
+        },
+      }
+    );
+  
+    if (rotationTl.scrollTrigger) {
+      scrollTriggerInstances.push(rotationTl.scrollTrigger);
+    }
+  
+    const wordElements = el.querySelectorAll('.word');
+  
+    const opacityTl = gsap.fromTo(
+      wordElements,
+      { opacity: props.baseOpacity, willChange: 'opacity' },
+      {
+        ease: 'none',
+        opacity: 1,
+        stagger: 0.05,
+        scrollTrigger: {
+          trigger: el,
+          scroller,
+          start: 'top bottom-=20%',
+          end: props.wordAnimationEnd,
+          scrub: true,
+        },
+      }
+    );
+  
+    if (opacityTl.scrollTrigger) {
+      scrollTriggerInstances.push(opacityTl.scrollTrigger);
+    }
+
+    if (props.enableBlur) {
+      const blurTl = gsap.fromTo(
+        wordElements,
+        { filter: `blur(${props.blurStrength}px)` },
+        {
+          ease: 'none',
+          filter: 'blur(0px)',
+          stagger: 0.05,
+          scrollTrigger: {
+            trigger: el,
+            scroller,
+            start: 'top bottom-=20%',
+            end: props.wordAnimationEnd,
+            scrub: true,
+          },
+        }
+      );
+  
+      if (blurTl.scrollTrigger) {
+        scrollTriggerInstances.push(blurTl.scrollTrigger);
+      }
+    }
+  };
+  
+  onMounted(() => {
+    initializeAnimation();
+  });
+  
+  onUnmounted(() => {
+    scrollTriggerInstances.forEach(trigger => trigger.kill());
+  });
+  
+  watch(
+    [
+      () => props.children,
+      () => props.scrollContainerRef,
+      () => props.enableBlur,
+      () => props.baseRotation,
+      () => props.baseOpacity,
+      () => props.rotationEnd,
+      () => props.wordAnimationEnd,
+      () => props.blurStrength
+    ],
+    () => {
+      initializeAnimation();
+    },
+    { deep: true }
+  );
+  </script>
+  

src/demo/TextAnimations/ScrollRevealDemo.vue

@@ -0,0 +1,205 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div 
+        ref="containerRef"
+        class="demo-container"
+        @wheel="smoothScroll"
+      >
+
+        <div class="scroll-instruction">
+          Scroll Down
+        </div>
+
+        <div class="scroll-content">
+          <ScrollReveal
+            :children="scrollText"
+            :enable-blur="enableBlur"
+            :base-opacity="baseOpacity"
+            :base-rotation="baseRotation"
+            :blur-strength="blurStrength"
+            :container-class-name="containerClassName"
+            :text-class-name="textClassName"
+            :rotation-end="rotationEnd"
+            :word-animation-end="wordAnimationEnd"
+            :scroll-container-ref="{ current: containerRef }"
+            :key="rerenderKey"
+          />
+        </div>
+      </div>
+
+      <Customize>
+
+          <PreviewSwitch 
+            title="Enable Hover" 
+            :model-value="enableBlur"
+            @update:model-value="(val: boolean) => { enableBlur = val; forceRerender() }" 
+          />
+          <PreviewSlider title="Base Opacity:" v-model="baseOpacity" :min="0" :max="1" :step="0.1" value-unit="" />
+          <PreviewSlider title="Base Rotation:" v-model="baseRotation" :min="0" :max="10" :step="0.5" value-unit="deg" />
+          <PreviewSlider title="Blur Strength:" v-model="blurStrength" :min="0" :max="10" :step="0.5" value-unit="px" />
+
+      </Customize>
+
+      <PropTable :data="propData" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="scrollRevealCode" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="scrollRevealCode.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 ScrollReveal from '../../content/TextAnimations/ScrollReveal/ScrollReveal.vue'
+import PreviewSlider from '../../components/common/PreviewSlider.vue'
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
+import { scrollRevealCode } from '@/constants/code/TextAnimations/scrollRevealCode'
+
+const containerRef = ref<HTMLElement | null>(null)
+const scrollText = ref("When does a man die? When he is hit by a bullet? No! When he suffers a disease? No! When he ate a soup made out of a poisonous mushroom? No! A man dies when he is forgotten!")
+const enableBlur = ref(true)
+const baseOpacity = ref(0.1)
+const baseRotation = ref(3)
+const blurStrength = ref(4)
+const containerClassName = ref("")
+const textClassName = ref("")
+const rotationEnd = ref("bottom bottom")
+const wordAnimationEnd = ref("bottom bottom")
+const rerenderKey = ref(0)
+
+const forceRerender = () => {
+rerenderKey.value++
+}
+
+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 word by word'
+},
+{
+  name: 'scrollContainerRef',
+  type: 'object',
+  default: 'undefined',
+  description: 'Ref to a custom scroll container (defaults to window)'
+},
+{
+  name: 'enableBlur',
+  type: 'boolean',
+  default: 'true',
+  description: 'Whether to enable blur animation'
+},
+{
+  name: 'baseOpacity',
+  type: 'number',
+  default: '0.1',
+  description: 'Starting opacity value for words'
+},
+{
+  name: 'baseRotation',
+  type: 'number',
+  default: '3',
+  description: 'Starting rotation value in degrees'
+},
+{
+  name: 'blurStrength',
+  type: 'number',
+  default: '4',
+  description: 'Blur strength in pixels'
+},
+{
+  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: 'rotationEnd',
+  type: 'string',
+  default: '"bottom bottom"',
+  description: 'ScrollTrigger end position for rotation animation'
+},
+{
+  name: 'wordAnimationEnd',
+  type: 'string',
+  default: '"bottom bottom"',
+  description: 'ScrollTrigger end position for word animations'
+}
+]
+</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>