x-intersect to trigger x-data function

[gcw07]

I created a simple x-data function that does a simple count up animation (eg. start at 0 and count to 100).

import Alpine from 'alpinejs';
import intersect from '@alpinejs/intersect';
import countUp from './countUp';

Alpine.data('countUp', countUp);

countUp.js contains:

export default (startValue, endValue, time = 1000) => ({
  current: startValue,

  init() {
    this.$nextTick(() => {
      this.current = startValue;

      const interval = Math.max(time / (endValue - startValue), 5);
      const step = (endValue - startValue) / (time / interval);
      const handle = setInterval(() => {
        if (this.current < endValue) {
          this.current += step
        } else {
          clearInterval(handle);
          this.current = endValue
        }
      }, interval);
    });
  }
})

This works perfectly fine with x-data

<div x-data="countUp(0, 2000, 800)" class="flex flex-col border-t border-gray-100 p-6 text-center sm:border-0 sm:border-l">
      <dt class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500">
          Projects
      </dt>
      <dd class="order-1 text-5xl font-extrabold text-gray-600" x-text="Math.round(current) + '+'">
          2000+
      </dd>
</div>

Is there any way to use x-intersect to trigger running this when in view? Maybe I'm missing something or maybe it just isn't possible with x-intersect. Thanks for any help you could provide.

[SimoTod]

You can add a control variable initialised to false. On x-intersect:enter you set it to true, on x-intersect:leave you set it back to false. Inside your setInterval at the very top, if the variable is false, you just return early without doing anything

[SimoTod]

If you are not interested in stopping it, you can also call the function with a different name and do x-intersect="yourFunction()"

[gcw07]

Yeah, it would always be just an x-intersect.once call, so no need for it to start and stop counting. More just start when on screen instead of upon initial page loading. What do you mean by call my function (countUp()) with a different name? I've tried just doing

x-intersect="countUp(0, 2000, 800)"

But it does not seem to run. Thanks.

[SimoTod]

Nah, countUp is your x-data which you always need in alpine. Just rename init() to start() then add x-intersect="start()"

[gcw07]

That works great. Thanks.