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

Added useTemplateRef API support

Browse Source
This commit is contained in:
msavulescu
2025-07-18 16:20:35 +03:00
parent 2aad0d4f4c
commit 6af299052a
69 changed files with 157 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/content/TextAnimations/AsciiText/AsciiText.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
import * as THREE from 'three';
interface AsciiTextProps {
@@ -495,7 +495,7 @@ class CanvAscii {
}
}
const containerRef = ref<HTMLDivElement | null>(null);
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
let asciiRef: CanvAscii | null = null;
const initializeAscii = () => {

4
src/content/TextAnimations/BlurText/BlurText.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import { ref, computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
import { Motion } from 'motion-v';
interface BlurTextProps {
@@ -45,7 +45,7 @@ const buildKeyframes = (
const elements = computed(() => (props.animateBy === 'words' ? props.text.split(' ') : props.text.split('')));
const inView = ref(false);
const rootRef = ref<HTMLParagraphElement | null>(null);
const rootRef = useTemplateRef<HTMLParagraphElement>('rootRef');
let observer: IntersectionObserver | null = null;
const defaultFrom = computed(() =>

4
src/content/TextAnimations/DecryptedText/DecryptedText.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import { ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
interface DecryptedTextProps {
text: string;
@@ -33,7 +33,7 @@ const emit = defineEmits<{
animationComplete: [];
}>();
const containerRef = ref<HTMLSpanElement>();
const containerRef = useTemplateRef<HTMLSpanElement>('containerRef');
const displayText = ref(props.text);
const isHovering = ref(false);
const isScrambling = ref(false);

8
src/content/TextAnimations/FallingText/FallingText.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import { ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
import Matter from 'matter-js';
interface FallingTextProps {
@@ -24,9 +24,9 @@ const props = withDefaults(defineProps<FallingTextProps>(), {
fontSize: '1rem'
});
const containerRef = ref<HTMLDivElement>();
const textRef = ref<HTMLDivElement>();
const canvasContainerRef = ref<HTMLDivElement>();
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
const textRef = useTemplateRef<HTMLDivElement>('textRef');
const canvasContainerRef = useTemplateRef<HTMLDivElement>('canvasContainerRef');
const effectStarted = ref(false);

4
src/content/TextAnimations/FuzzyText/FuzzyText.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import { onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
interface FuzzyTextProps {
text: string;
@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<FuzzyTextProps>(), {
hoverIntensity: 0.5
});
const canvasRef = ref<HTMLCanvasElement | null>(null);
const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
let animationFrameId: number;
let isCancelled = false;
let cleanup: (() => void) | null = null;

4
src/content/TextAnimations/ScrambleText/ScrambleText.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
import { gsap } from 'gsap';
import { SplitText } from 'gsap/SplitText';
import { ScrambleTextPlugin } from 'gsap/ScrambleTextPlugin';
@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<ScrambleTextProps>(), {
style: () => ({})
});
const rootRef = ref<HTMLDivElement | null>(null);
const rootRef = useTemplateRef<HTMLDivElement>('rootRef');
let splitText: SplitText | null = null;
let handleMove: ((e: PointerEvent) => void) | null = null;

4
src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
View File

@@ -12,7 +12,7 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import { computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
@@ -40,7 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
stagger: 0.03
});
const containerRef = ref<HTMLElement | null>(null);
const containerRef = useTemplateRef<HTMLElement>('containerRef');
let scrollTriggerInstance: ScrollTrigger | null = null;
const splitText = computed(() => {

4
src/content/TextAnimations/ScrollReveal/ScrollReveal.vue
View File

@@ -9,7 +9,7 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import { computed, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
@@ -39,7 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
wordAnimationEnd: 'bottom bottom'
});
const containerRef = ref<HTMLElement | null>(null);
const containerRef = useTemplateRef<HTMLElement>('containerRef');
let scrollTriggerInstances: ScrollTrigger[] = [];
const splitText = computed(() => {

4
src/content/TextAnimations/SplitText/SplitText.vue
View File

@@ -12,7 +12,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import { ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { SplitText as GSAPSplitText } from 'gsap/SplitText';
@@ -51,7 +51,7 @@ const emit = defineEmits<{
'animation-complete': [];
}>();
const textRef = ref<HTMLParagraphElement | null>(null);
const textRef = useTemplateRef<HTMLParagraphElement>('textRef');
const animationCompletedRef = ref(false);
const scrollTriggerRef = ref<ScrollTrigger | null>(null);
const timelineRef = ref<gsap.core.Timeline | null>(null);

4
src/content/TextAnimations/TextCursor/TextCursor.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';
import { Motion } from 'motion-v';
interface TextCursorProps {
@@ -34,7 +34,7 @@ const props = withDefaults(defineProps<TextCursorProps>(), {
maxPoints: 5
});
const containerRef = ref<HTMLDivElement>();
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
const trail = ref<TrailItem[]>([]);
const lastMoveTime = ref(Date.now());
const idCounter = ref(0);

6
src/content/TextAnimations/TextPressure/TextPressure.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue';
import { ref, onMounted, onUnmounted, nextTick, computed, watch, useTemplateRef } from 'vue';
interface TextPressureProps {
text?: string;
@@ -37,8 +37,8 @@ const props = withDefaults(defineProps<TextPressureProps>(), {
minFontSize: 24
});
const containerRef = ref<HTMLDivElement | null>(null);
const titleRef = ref<HTMLHeadingElement | null>(null);
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
const titleRef = useTemplateRef<HTMLHeadingElement>('titleRef');
const spansRef = ref<(HTMLSpanElement | null)[]>([]);
const mouseRef = ref({ x: 0, y: 0 });

4
src/content/TextAnimations/TextTrail/TextTrail.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
import {
CanvasTexture,
Clock,
@@ -49,7 +49,7 @@ const props = withDefaults(defineProps<TextTrailProps>(), {
supersample: 2
});
const containerRef = ref<HTMLDivElement>();
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
const hexToRgb = (hex: string): [number, number, number] => {
let h = hex.replace('#', '');

4
src/content/TextAnimations/TrueFocus/TrueFocus.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { motion } from 'motion-v';
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { computed, nextTick, onMounted, onUnmounted, ref, watch, useTemplateRef } from 'vue';
interface TrueFocusProps {
sentence?: string;
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<TrueFocusProps>(), {
const words = computed(() => props.sentence.split(' '));
const currentIndex = ref(0);
const lastActiveIndex = ref<number | null>(null);
const containerRef = ref<HTMLDivElement>();
const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
const wordRefs = ref<HTMLSpanElement[]>([]);
const focusRect = ref({ x: 0, y: 0, width: 0, height: 0 });