atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 14:39:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

jsrepo v3

Browse Source
This commit is contained in:
David Haz
2025-12-15 23:50:24 +02:00
parent 9214481555
commit e621971723
119 changed files with 401 additions and 2197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/r/ScrollReveal.json Normal file
View File

@@ -0,0 +1 @@
{"name":"ScrollReveal","title":"ScrollReveal","description":"Text gently unblurs and reveals on scroll.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n <h2 ref=\"containerRef\" :class=\"`my-5 ${containerClassName}`\">\n <p :class=\"`leading-relaxed font-semibold ${textClassName}`\" style=\"font-size: clamp(1.6rem, 4vw, 3rem)\">\n <span v-for=\"(word, index) in splitText\" :key=\"index\" :class=\"word.isWhitespace ? '' : 'inline-block word'\">\n {{ word.text }}\n </span>\n </p>\n </h2>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\n\ninterface Props {\n children: string;\n scrollContainerRef?: { current: HTMLElement | null };\n enableBlur?: boolean;\n baseOpacity?: number;\n baseRotation?: number;\n blurStrength?: number;\n containerClassName?: string;\n textClassName?: string;\n rotationEnd?: string;\n wordAnimationEnd?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n enableBlur: true,\n baseOpacity: 0.1,\n baseRotation: 3,\n blurStrength: 4,\n containerClassName: '',\n textClassName: '',\n rotationEnd: 'bottom bottom',\n wordAnimationEnd: 'bottom bottom'\n});\n\nconst containerRef = useTemplateRef<HTMLElement>('containerRef');\nlet scrollTriggerInstances: ScrollTrigger[] = [];\n\nconst splitText = computed(() => {\n const text = typeof props.children === 'string' ? props.children : '';\n return text.split(/(\\s+)/).map((word, index) => ({\n text: word,\n isWhitespace: word.match(/^\\s+$/) !== null,\n key: index\n }));\n});\n\nconst initializeAnimation = () => {\n const el = containerRef.value;\n if (!el) return;\n\n scrollTriggerInstances.forEach(trigger => trigger.kill());\n scrollTriggerInstances = [];\n\n const scroller =\n props.scrollContainerRef && props.scrollContainerRef.current ? props.scrollContainerRef.current : window;\n\n const rotationTl = gsap.fromTo(\n el,\n { transformOrigin: '0% 50%', rotate: props.baseRotation },\n {\n ease: 'none',\n rotate: 0,\n scrollTrigger: {\n trigger: el,\n scroller,\n start: 'top bottom',\n end: props.rotationEnd,\n scrub: true\n }\n }\n );\n\n if (rotationTl.scrollTrigger) {\n scrollTriggerInstances.push(rotationTl.scrollTrigger);\n }\n\n const wordElements = el.querySelectorAll('.word');\n\n const opacityTl = gsap.fromTo(\n wordElements,\n { opacity: props.baseOpacity, willChange: 'opacity' },\n {\n ease: 'none',\n opacity: 1,\n stagger: 0.05,\n scrollTrigger: {\n trigger: el,\n scroller,\n start: 'top bottom-=20%',\n end: props.wordAnimationEnd,\n scrub: true\n }\n }\n );\n\n if (opacityTl.scrollTrigger) {\n scrollTriggerInstances.push(opacityTl.scrollTrigger);\n }\n\n if (props.enableBlur) {\n const blurTl = gsap.fromTo(\n wordElements,\n { filter: `blur(${props.blurStrength}px)` },\n {\n ease: 'none',\n filter: 'blur(0px)',\n stagger: 0.05,\n scrollTrigger: {\n trigger: el,\n scroller,\n start: 'top bottom-=20%',\n end: props.wordAnimationEnd,\n scrub: true\n }\n }\n );\n\n if (blurTl.scrollTrigger) {\n scrollTriggerInstances.push(blurTl.scrollTrigger);\n }\n }\n};\n\nonMounted(() => {\n initializeAnimation();\n});\n\nonUnmounted(() => {\n scrollTriggerInstances.forEach(trigger => trigger.kill());\n});\n\nwatch(\n [\n () => props.children,\n () => props.scrollContainerRef,\n () => props.enableBlur,\n () => props.baseRotation,\n () => props.baseOpacity,\n () => props.rotationEnd,\n () => props.wordAnimationEnd,\n () => props.blurStrength\n ],\n () => {\n initializeAnimation();\n },\n { deep: true }\n);\n</script>\n","path":"ScrollReveal/ScrollReveal.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["TextAnimations"]}