-
Notifications
You must be signed in to change notification settings - Fork 78
SvelteKit + Gsap: Haptics not triggered on first ineraction #35
Copy link
Copy link
Open
Description
I am using the package on a GSAP draggable list. The first time I drag, there are no haptics. Haptics only activate if I stop dragging and then try to drag again.
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import gsap from 'gsap';
import { Draggable } from 'gsap/all';
import { createWebHaptics } from "web-haptics/svelte";
const { trigger, destroy } = createWebHaptics();
onDestroy(destroy);
let containerElement: HTMLElement;
let currentIndex = 0;
let itemHeight = 50;
onMount(() => {
gsap.registerPlugin(Draggable);
Draggable.create(containerElement, {
type: 'y',
onDrag: function() {
const y = this.y;
let newIndex = Math.round(-y / itemHeight);
if (newIndex !== currentIndex) {
currentIndex = newIndex;
trigger([{ duration: 15 }], { intensity: 0.1 });
}
}
});
});
function handleItemClick(index: number, title: string) {
if (currentIndex === index) {
if (title !== 'about me') {
trigger([{ duration: 15 }], { intensity: 0.1 });
}
} else {
trigger([{ duration: 15 }], { intensity: 0.1 });
currentIndex = index;
gsap.to(containerElement, {
y: -currentIndex * itemHeight,
duration: 0.3,
});
}
}
...
</script>
<div bind:this={containerElement}>
...
</div>
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels