Skip to content

SvelteKit + Gsap: Haptics not triggered on first ineraction #35

@dgpapagian

Description

@dgpapagian

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions