mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
1 line
14 KiB
JSON
1 line
14 KiB
JSON
{"name":"Shuffle","title":"Shuffle","description":"GSAP-powered slot machine style text shuffle animation with scroll trigger.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n <component :is=\"tag\" ref=\"textRef\" :class=\"computedClasses\" :style=\"computedStyle\">\n {{ text }}\n </component>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport { SplitText as GSAPSplitText } from 'gsap/SplitText';\n\ngsap.registerPlugin(ScrollTrigger, GSAPSplitText);\n\nexport interface ShuffleProps {\n text: string;\n className?: string;\n style?: Record<string, any>;\n shuffleDirection?: 'left' | 'right' | 'up' | 'down';\n duration?: number;\n maxDelay?: number;\n ease?: string | ((t: number) => number);\n threshold?: number;\n rootMargin?: string;\n tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';\n textAlign?: 'left' | 'center' | 'right' | 'justify';\n onShuffleComplete?: () => void;\n shuffleTimes?: number;\n animationMode?: 'random' | 'evenodd';\n loop?: boolean;\n loopDelay?: number;\n stagger?: number;\n scrambleCharset?: string;\n colorFrom?: string;\n colorTo?: string;\n triggerOnce?: boolean;\n respectReducedMotion?: boolean;\n triggerOnHover?: boolean;\n}\n\nconst props = withDefaults(defineProps<ShuffleProps>(), {\n className: '',\n shuffleDirection: 'right',\n duration: 0.35,\n maxDelay: 0,\n ease: 'power3.out',\n threshold: 0.1,\n rootMargin: '-100px',\n tag: 'p',\n textAlign: 'center',\n shuffleTimes: 1,\n animationMode: 'evenodd',\n loop: false,\n loopDelay: 0,\n stagger: 0.03,\n scrambleCharset: '',\n colorFrom: undefined,\n colorTo: undefined,\n triggerOnce: true,\n respectReducedMotion: true,\n triggerOnHover: true\n});\n\nconst emit = defineEmits<{\n 'shuffle-complete': [];\n}>();\n\nconst textRef = useTemplateRef<HTMLElement>('textRef');\nconst fontsLoaded = ref(false);\nconst ready = ref(false);\n\nconst splitRef = ref<GSAPSplitText | null>(null);\nconst wrappersRef = ref<HTMLElement[]>([]);\nconst tlRef = ref<gsap.core.Timeline | null>(null);\nconst playingRef = ref(false);\nconst scrollTriggerRef = ref<ScrollTrigger | null>(null);\nlet hoverHandler: ((e: Event) => void) | null = null;\n\nconst scrollTriggerStart = computed(() => {\n const startPct = (1 - props.threshold) * 100;\n const mm = /^(-?\\d+(?:\\.\\d+)?)(px|em|rem|%)?$/.exec(props.rootMargin || '');\n const mv = mm ? parseFloat(mm[1]) : 0;\n const mu = mm ? mm[2] || 'px' : 'px';\n const sign = mv === 0 ? '' : mv < 0 ? `-=${Math.abs(mv)}${mu}` : `+=${mv}${mu}`;\n return `top ${startPct}%${sign}`;\n});\n\nconst baseTw = 'inline-block whitespace-normal break-words will-change-transform uppercase text-6xl leading-none';\n\nconst userHasFont = computed(() => props.className && /font[-[]/i.test(props.className));\n\nconst fallbackFont = computed(() => (userHasFont.value ? {} : { fontFamily: `'Press Start 2P', sans-serif` }));\n\nconst computedStyle = computed(() => ({\n textAlign: props.textAlign,\n ...fallbackFont.value,\n ...props.style\n}));\n\nconst computedClasses = computed(() => `${baseTw} ${ready.value ? 'visible' : 'invisible'} ${props.className}`.trim());\n\nconst removeHover = () => {\n if (hoverHandler && textRef.value) {\n textRef.value.removeEventListener('mouseenter', hoverHandler);\n hoverHandler = null;\n }\n};\n\nconst teardown = () => {\n if (tlRef.value) {\n tlRef.value.kill();\n tlRef.value = null;\n }\n if (wrappersRef.value.length) {\n wrappersRef.value.forEach(wrap => {\n const inner = wrap.firstElementChild as HTMLElement | null;\n const orig = inner?.querySelector('[data-orig=\"1\"]') as HTMLElement | null;\n if (orig && wrap.parentNode) wrap.parentNode.replaceChild(orig, wrap);\n });\n wrappersRef.value = [];\n }\n try {\n splitRef.value?.revert();\n } catch {}\n splitRef.value = null;\n playingRef.value = false;\n};\n\nconst build = () => {\n if (!textRef.value) return;\n teardown();\n\n const el = textRef.value;\n const computedFont = getComputedStyle(el).fontFamily;\n\n splitRef.value = new GSAPSplitText(el, {\n type: 'chars',\n charsClass: 'shuffle-char',\n wordsClass: 'shuffle-word',\n linesClass: 'shuffle-line',\n reduceWhiteSpace: false\n });\n\n const chars = (splitRef.value.chars || []) as HTMLElement[];\n wrappersRef.value = [];\n\n const rolls = Math.max(1, Math.floor(props.shuffleTimes));\n const rand = (set: string) => set.charAt(Math.floor(Math.random() * set.length)) || '';\n\n chars.forEach(ch => {\n const parent = ch.parentElement;\n if (!parent) return;\n\n const w = ch.getBoundingClientRect().width;\n const h = ch.getBoundingClientRect().height;\n if (!w) return;\n\n const wrap = document.createElement('span');\n wrap.className = 'inline-block overflow-hidden text-left';\n Object.assign(wrap.style, {\n width: w + 'px',\n height: props.shuffleDirection === 'up' || props.shuffleDirection === 'down' ? h + 'px' : 'auto',\n verticalAlign: 'bottom'\n });\n\n const inner = document.createElement('span');\n inner.className =\n 'inline-block will-change-transform origin-left transform-gpu ' +\n (props.shuffleDirection === 'up' || props.shuffleDirection === 'down'\n ? 'whitespace-normal'\n : 'whitespace-nowrap');\n\n parent.insertBefore(wrap, ch);\n wrap.appendChild(inner);\n\n const firstOrig = ch.cloneNode(true) as HTMLElement;\n firstOrig.className =\n 'text-left ' + (props.shuffleDirection === 'up' || props.shuffleDirection === 'down' ? 'block' : 'inline-block');\n Object.assign(firstOrig.style, { width: w + 'px', fontFamily: computedFont });\n\n ch.setAttribute('data-orig', '1');\n ch.className =\n 'text-left ' + (props.shuffleDirection === 'up' || props.shuffleDirection === 'down' ? 'block' : 'inline-block');\n Object.assign(ch.style, { width: w + 'px', fontFamily: computedFont });\n\n inner.appendChild(firstOrig);\n for (let k = 0; k < rolls; k++) {\n const c = ch.cloneNode(true) as HTMLElement;\n if (props.scrambleCharset) c.textContent = rand(props.scrambleCharset);\n c.className =\n 'text-left ' +\n (props.shuffleDirection === 'up' || props.shuffleDirection === 'down' ? 'block' : 'inline-block');\n Object.assign(c.style, { width: w + 'px', fontFamily: computedFont });\n inner.appendChild(c);\n }\n inner.appendChild(ch);\n\n const steps = rolls + 1;\n if (props.shuffleDirection === 'right' || props.shuffleDirection === 'down') {\n const firstCopy = inner.firstElementChild as HTMLElement | null;\n const real = inner.lastElementChild as HTMLElement | null;\n if (real) inner.insertBefore(real, inner.firstChild);\n if (firstCopy) inner.appendChild(firstCopy);\n }\n\n let startX = 0;\n let finalX = 0;\n let startY = 0;\n let finalY = 0;\n\n if (props.shuffleDirection === 'right') {\n startX = -steps * w;\n finalX = 0;\n } else if (props.shuffleDirection === 'left') {\n startX = 0;\n finalX = -steps * w;\n } else if (props.shuffleDirection === 'down') {\n startY = -steps * h;\n finalY = 0;\n } else if (props.shuffleDirection === 'up') {\n startY = 0;\n finalY = -steps * h;\n }\n\n if (props.shuffleDirection === 'left' || props.shuffleDirection === 'right') {\n gsap.set(inner, { x: startX, y: 0, force3D: true });\n inner.setAttribute('data-start-x', String(startX));\n inner.setAttribute('data-final-x', String(finalX));\n } else {\n gsap.set(inner, { x: 0, y: startY, force3D: true });\n inner.setAttribute('data-start-y', String(startY));\n inner.setAttribute('data-final-y', String(finalY));\n }\n\n if (props.colorFrom) (inner.style as any).color = props.colorFrom;\n wrappersRef.value.push(wrap);\n });\n};\n\nconst getInners = () => wrappersRef.value.map(w => w.firstElementChild as HTMLElement);\n\nconst randomizeScrambles = () => {\n if (!props.scrambleCharset) return;\n wrappersRef.value.forEach(w => {\n const strip = w.firstElementChild as HTMLElement;\n if (!strip) return;\n const kids = Array.from(strip.children) as HTMLElement[];\n for (let i = 1; i < kids.length - 1; i++) {\n kids[i].textContent = props.scrambleCharset.charAt(Math.floor(Math.random() * props.scrambleCharset.length));\n }\n });\n};\n\nconst cleanupToStill = () => {\n wrappersRef.value.forEach(w => {\n const strip = w.firstElementChild as HTMLElement;\n if (!strip) return;\n const real = strip.querySelector('[data-orig=\"1\"]') as HTMLElement | null;\n if (!real) return;\n strip.replaceChildren(real);\n strip.style.transform = 'none';\n strip.style.willChange = 'auto';\n });\n};\n\nconst armHover = () => {\n if (!props.triggerOnHover || !textRef.value) return;\n removeHover();\n const handler = () => {\n if (playingRef.value) return;\n build();\n if (props.scrambleCharset) randomizeScrambles();\n play();\n };\n hoverHandler = handler;\n textRef.value.addEventListener('mouseenter', handler);\n};\n\nconst play = () => {\n const strips = getInners();\n if (!strips.length) return;\n\n playingRef.value = true;\n const isVertical = props.shuffleDirection === 'up' || props.shuffleDirection === 'down';\n\n const tl = gsap.timeline({\n smoothChildTiming: true,\n repeat: props.loop ? -1 : 0,\n repeatDelay: props.loop ? props.loopDelay : 0,\n onRepeat: () => {\n if (props.scrambleCharset) randomizeScrambles();\n if (isVertical) {\n gsap.set(strips, { y: (i, t: HTMLElement) => parseFloat(t.getAttribute('data-start-y') || '0') });\n } else {\n gsap.set(strips, { x: (i, t: HTMLElement) => parseFloat(t.getAttribute('data-start-x') || '0') });\n }\n emit('shuffle-complete');\n props.onShuffleComplete?.();\n },\n onComplete: () => {\n playingRef.value = false;\n if (!props.loop) {\n cleanupToStill();\n if (props.colorTo) gsap.set(strips, { color: props.colorTo });\n emit('shuffle-complete');\n props.onShuffleComplete?.();\n armHover();\n }\n }\n });\n\n const addTween = (targets: HTMLElement[], at: number) => {\n const vars: any = {\n duration: props.duration,\n ease: props.ease,\n force3D: true,\n stagger: props.animationMode === 'evenodd' ? props.stagger : 0\n };\n if (isVertical) {\n vars.y = (i: number, t: HTMLElement) => parseFloat(t.getAttribute('data-final-y') || '0');\n } else {\n vars.x = (i: number, t: HTMLElement) => parseFloat(t.getAttribute('data-final-x') || '0');\n }\n\n tl.to(targets, vars, at);\n if (props.colorFrom && props.colorTo)\n tl.to(targets, { color: props.colorTo, duration: props.duration, ease: props.ease }, at);\n };\n\n if (props.animationMode === 'evenodd') {\n const odd = strips.filter((_, i) => i % 2 === 1);\n const even = strips.filter((_, i) => i % 2 === 0);\n const oddTotal = props.duration + Math.max(0, odd.length - 1) * props.stagger;\n const evenStart = odd.length ? oddTotal * 0.7 : 0;\n if (odd.length) addTween(odd, 0);\n if (even.length) addTween(even, evenStart);\n } else {\n strips.forEach(strip => {\n const d = Math.random() * props.maxDelay;\n const vars: any = {\n duration: props.duration,\n ease: props.ease,\n force3D: true\n };\n if (isVertical) {\n vars.y = parseFloat(strip.getAttribute('data-final-y') || '0');\n } else {\n vars.x = parseFloat(strip.getAttribute('data-final-x') || '0');\n }\n tl.to(strip, vars, d);\n if (props.colorFrom && props.colorTo)\n tl.fromTo(\n strip,\n { color: props.colorFrom },\n { color: props.colorTo, duration: props.duration, ease: props.ease },\n d\n );\n });\n }\n\n tlRef.value = tl;\n};\n\nconst create = () => {\n build();\n if (props.scrambleCharset) randomizeScrambles();\n play();\n armHover();\n ready.value = true;\n};\n\nconst initializeAnimation = async () => {\n if (typeof window === 'undefined' || !textRef.value || !props.text || !fontsLoaded.value) return;\n\n if (\n props.respectReducedMotion &&\n window.matchMedia &&\n window.matchMedia('(prefers-reduced-motion: reduce)').matches\n ) {\n ready.value = true;\n emit('shuffle-complete');\n props.onShuffleComplete?.();\n return;\n }\n\n await nextTick();\n\n const el = textRef.value;\n const start = scrollTriggerStart.value;\n\n const st = ScrollTrigger.create({\n trigger: el,\n start,\n once: props.triggerOnce,\n onEnter: create\n });\n\n scrollTriggerRef.value = st;\n};\n\nconst cleanup = () => {\n if (scrollTriggerRef.value) {\n scrollTriggerRef.value.kill();\n scrollTriggerRef.value = null;\n }\n removeHover();\n teardown();\n ready.value = false;\n};\n\nonMounted(async () => {\n if ('fonts' in document) {\n if (document.fonts.status === 'loaded') {\n fontsLoaded.value = true;\n } else {\n await document.fonts.ready;\n fontsLoaded.value = true;\n }\n } else {\n fontsLoaded.value = true;\n }\n\n initializeAnimation();\n});\n\nonUnmounted(() => {\n cleanup();\n});\n\nwatch(\n [\n () => props.text,\n () => props.duration,\n () => props.maxDelay,\n () => props.ease,\n () => props.shuffleDirection,\n () => props.shuffleTimes,\n () => props.animationMode,\n () => props.loop,\n () => props.loopDelay,\n () => props.stagger,\n () => props.scrambleCharset,\n () => props.colorFrom,\n () => props.colorTo,\n () => props.triggerOnce,\n () => props.respectReducedMotion,\n () => props.triggerOnHover,\n () => fontsLoaded.value\n ],\n () => {\n cleanup();\n initializeAnimation();\n }\n);\n</script>\n","path":"Shuffle/Shuffle.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["TextAnimations"]} |