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

Merge pull request #129 from SAMUELMUCHIRI/main

Browse Source 
Animation feature build fix: Ensuring strict type declaration to avoi…
This commit is contained in:
David
2026-01-05 14:37:36 +02:00
committed by GitHub
parent a6ac528fca fdbab7a89f
commit 7ef2b564b6
1 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -78,9 +78,11 @@ const setupAnimation = () => {
if (spinTl.value) { if (spinTl.value) {
spinTl.value.kill(); spinTl.value.kill();
} }
spinTl.value = gsap spinTl.value = gsap.timeline({ repeat: -1 }).to(cursor, {
.timeline({ repeat: -1 }) rotation: '+=360',
.to(cursor, { rotation: '+=360', duration: props.spinDuration, ease: 'none' }); duration: props.spinDuration,
ease: 'none'
});
}; };
createSpinTimeline(); createSpinTimeline();
@@ -173,11 +175,13 @@ const setupAnimation = () => {
const offsets = [tlOffset, trOffset, brOffset, blOffset]; const offsets = [tlOffset, trOffset, brOffset, blOffset];
corners.forEach((corner, index) => { corners.forEach((corner, index) => {
const offset = offsets[index];
if (!offset) return;
tl.to( tl.to(
corner as HTMLElement, corner as HTMLElement,
{ {
x: offsets[index].x, x: offset.x,
y: offsets[index].y, y: offset.y,
duration: 0.2, duration: 0.2,
ease: 'power2.out' ease: 'power2.out'
}, },
@@ -221,11 +225,13 @@ const setupAnimation = () => {
const tl = gsap.timeline(); const tl = gsap.timeline();
corners.forEach((corner, index) => { corners.forEach((corner, index) => {
const pos = positions[index];
if (!pos) return;
tl.to( tl.to(
corner as HTMLElement, corner as HTMLElement,
{ {
x: positions[index].x, x: pos.x,
y: positions[index].y, y: pos.y,
duration: 0.3, duration: 0.3,
ease: 'power3.out' ease: 'power3.out'
}, },
@@ -240,9 +246,11 @@ const setupAnimation = () => {
const normalizedRotation = currentRotation % 360; const normalizedRotation = currentRotation % 360;
spinTl.value.kill(); spinTl.value.kill();
spinTl.value = gsap spinTl.value = gsap.timeline({ repeat: -1 }).to(cursorRef.value, {
.timeline({ repeat: -1 }) rotation: '+=360',
.to(cursorRef.value, { rotation: '+=360', duration: props.spinDuration, ease: 'none' }); duration: props.spinDuration,
ease: 'none'
});
gsap.to(cursorRef.value, { gsap.to(cursorRef.value, {
rotation: normalizedRotation + 360, rotation: normalizedRotation + 360,
@@ -329,9 +337,11 @@ watch(
if (spinTl.value.isActive()) { if (spinTl.value.isActive()) {
spinTl.value.kill(); spinTl.value.kill();
spinTl.value = gsap spinTl.value = gsap.timeline({ repeat: -1 }).to(cursorRef.value, {
.timeline({ repeat: -1 }) rotation: '+=360',
.to(cursorRef.value, { rotation: '+=360', duration: props.spinDuration, ease: 'none' }); duration: props.spinDuration,
ease: 'none'
});
} }
}, },
{ immediate: true } { immediate: true }