metonym / svelte-intersection-observer

Detect if an element is in the viewport using the Intersection Observer API
https://metonym.github.io/svelte-intersection-observer/
MIT License
327 stars 8 forks source link

once not working #91

Open thisispete opened 2 weeks ago

thisispete commented 2 weeks ago

when I use once and on:intersect the function seems to be getting called every frame instead of just one time.

  const doOnce = () => {
    console.log('once?');
    //this is firing every frame
  };

  ...

  <IntersectionObserver once {element} on:intersect={doOnce}>
  <div bind:this={element}>

  ...
Screenshot 2024-11-14 at 11 35 09
thisispete commented 2 weeks ago

oh.. ok something just noticed: it fires every time the contents changes - so I have a tweened element inside, it fires every frame until the animation ends, and then it stops firing.

ie:

  const number = tweened(0, {
    duration: 5000
  });

  const doOnce = () => {
    console.log('once?');
    $number = 15000
  }
<IntersectionObserver once {element} on:intersect={doOnce}>
  <div bind:this={element}>
    {$number}

this also messes with the duration of the tween - as a side effect, it's resetting every frame, so it takes much longer the bigger the number or the more decimal places.

metonym commented 2 weeks ago

Could you provide a minimal repro? https://svelte.dev/playground/hello-world?version=5.2.0

Is this using Svelte 5? Happy to help debug.