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

fix: issue#84

Browse Source
This commit is contained in:
xzadudu179
2025-08-28 18:12:05 +08:00
parent 2f685601a3
commit 3693222016
1 changed files with 10 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/content/Animations/TargetCursor/TargetCursor.vue
View File

@@ -116,7 +116,7 @@ const setupAnimation = () => {
activeTarget = target;
gsap.killTweensOf(cursorRef.value, 'rotation');
gsap.killTweensOf(cursorRef.value);
spinTl.value?.pause();
gsap.set(cursorRef.value, { rotation: 0 });
@@ -336,30 +336,22 @@ watch(
</script>
<template>
<div
ref="cursorRef"
<div ref="cursorRef"
class="top-0 left-0 z-[9999] fixed w-0 h-0 -translate-x-1/2 -translate-y-1/2 pointer-events-none mix-blend-difference transform opacity-0"
:style="{ willChange: 'transform' }"
>
<div
class="top-1/2 left-1/2 absolute bg-white rounded-full w-1 h-1 -translate-x-1/2 -translate-y-1/2 transform"
:style="{ willChange: 'transform' }"
/>
:style="{ willChange: 'transform' }">
<div class="top-1/2 left-1/2 absolute bg-white rounded-full w-1 h-1 -translate-x-1/2 -translate-y-1/2 transform"
:style="{ willChange: 'transform' }" />
<div
class="top-1/2 left-1/2 absolute border-[3px] border-white border-r-0 border-b-0 w-3 h-3 -translate-x-[150%] -translate-y-[150%] target-cursor-corner transform"
:style="{ willChange: 'transform' }"
/>
:style="{ willChange: 'transform' }" />
<div
class="top-1/2 left-1/2 absolute border-[3px] border-white border-b-0 border-l-0 w-3 h-3 -translate-y-[150%] translate-x-1/2 target-cursor-corner transform"
:style="{ willChange: 'transform' }"
/>
:style="{ willChange: 'transform' }" />
<div
class="top-1/2 left-1/2 absolute border-[3px] border-white border-t-0 border-l-0 w-3 h-3 translate-x-1/2 translate-y-1/2 target-cursor-corner transform"
:style="{ willChange: 'transform' }"
/>
:style="{ willChange: 'transform' }" />
<div
class="top-1/2 left-1/2 absolute border-[3px] border-white border-t-0 border-r-0 w-3 h-3 -translate-x-[150%] translate-y-1/2 target-cursor-corner transform"
:style="{ willChange: 'transform' }"
/>
:style="{ willChange: 'transform' }" />
</div>
</template>