Locomotive Scroll function trigger

Question

Can someone tell me how to trigger a function when the element is in view in locomotive scroll, I am kind of noob, please explain in detail, Thanks in advance

  const counterFunc = () => {
 counters.forEach((counter) => {
const updateCount = () => {
  const target = +counter.getAttribute("data-target");
  const count = +counter.innerText;

  // Lower inc to slow and higher to slow
  const inc = target / speed;

  // console.log(inc);
  // console.log(count);

  // Check if target is reached
  if (count < target) {
    // Add inc to count and output in counter
    counter.innerText = count + inc;
    // Call function every ms
    setTimeout(updateCount, 1);
  } else {
    counter.innerText = target;
    }
 };
  updateCount();
});
 };

 //HTML
<div id="counter-SUBSCRIBERS">
          <h1 class="counter" data-scroll data-target="60000">0</h1>
          <h5>Subscribers</h5>
        </div>
        <div id="counter-VIDEOS">
          <h1 class="counter" data-target="15000">0</h1>
          <h5>Comments</h5>
        </div>
        <div id="counter-ENGAGEMENT">
          <h1 class="counter" data-target="9000">0</h1>
          <h5>Share</h5>

Answer 1

A sample you could study:

var el = document.getElementById("test");
var wheel = "nothing";
var scroll = new LocomotiveScroll({
  el: el,
  smooth: true,
  repeat: true,
  getDirection: true
});

scroll.on("call", (fun, dir, obj) => {

  console.log("call", fun, dir);

});

scroll.on("scroll", (obj) => {
  if (obj.direction == wheel)return;
  wheel = obj.direction;

  console.log("scroll--", obj.direction);
  console.log(obj.currentElements['2'], Object.keys(obj.currentElements));

});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.css">

<div id="test">
  <div data-scroll-section>
    <section class="intro" data-scroll data-bg="#ffffff" data-color="#000000" >
      <div class="container">
        <div class="intro__content">
          <h5 class="intro__subtitle">
            <span>Lorem ipsum dolor.</span>
          </h5>

          <h2 class="intro__title" data-scroll data-scroll-call="text0">If I scroll to the second intro section (AND the first intro is in the viewport) it will change to a black background. But if I scroll up it will not change to a white background as the section did not get out from the viewport and the last
            call was with a black background.</h2>

          <p>You have to completely pass through a section to be able to reverse back the colors.<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
        </div>
      </div>
    </section>
  </div>

          <h2 class="intro__title" data-scroll data-scroll-call="text1">If I scroll to the second intro section (AND the first intro is in the viewport) it will change to a black background. But if I scroll up it will not change to a white background as the section did not get out from the viewport and the last
            call was with a black background.</h2>

          <p>You have to completely pass through a section to be able to reverse back the colors.<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
        </div>
      </div>
    </section>
  </div>
</div>