Is it possible to add offset to enableScrollSpy?

[stratboy]

Hi, I mean. If I scroll my page slowly, and top just when my big 3 counters are barely visible, they all show a static 0. I must scroll a little bit to make the counters start counting. It's not ideal in my case. The animations should be already started just before the counters come into page, otherwise the user will see a potentially too long 'flash' of 3 zerors.

I would need something like a 'offset' option that lets you determine an offset for when enableScrollSpy:true.

It it possible, or any other way to accomplish this?

[inorganik]

Yes, there is an option, scrollSpyDelay which defaults to 200 ms. You can change it to 0.

[stratboy]

I already used that but it's not enough. As you can see from the attachment, there's still room for having my counters all zeros without starting at all. I think the reason is that basically, countUp's scrollSpy uses the bottom boundary of the object to check if the object is in page, or in other words, it wants the entire object be in page, which can be logic but not always desiderable. In my case, counter objects are bigger than the numbers themselves. Also, I'd like them to start as soon as they're top passes the bottom of the page, thus before they're even fully visible.

By using intersectionObserver, you could simply set and parametrize the threshold. And by the way, intersectionObserver works exactly the opposite compared to countUp's scrollSpy: it defaults to notify intersection as soon as the upper/top boundary enters the designated root, not when the entire observed object is visible.

[stratboy]

This is my working solution using just an intersectionObserver:

import { CountUp } from "countup.js";

const counters = document.querySelectorAll('.counters-block .counter-number');
var countups = [];

for(const counter of counters){
  const tovalue = parseInt(counter.dataset.tovalue, 10);  
  const countUp = new CountUp(counter.id, tovalue, { 
    // enableScrollSpy: true, 
    // scrollSpyDelay: 0,
    duration: 3
  });

  countups.push(countUp);
}


const counters_box = document.querySelector(".counters-box");

let counter_observer = new IntersectionObserver((entries, observer) => { 
  entries.forEach(entry => {
    if(entry.isIntersecting){
      for(const countup of countups) countup.start();
    } else {
      for(const countup of countups) countup.reset();
    }
  });
});

counter_observer.observe(counters_box);

[inorganik]

That's an elegant solution with the intersection observer, though it will need to be polyfilled for some browsers - https://caniuse.com/intersectionobserver

I just wanted to point out, if your target elements have thick padding around them, that would also cause your issue. You could work around that by making the target element only as tall as the number and put a wrapper div with padding around it.

You can see on this stackblitz, the numbers animate right when they come into view: https://stackblitz.com/edit/countup-typescript?file=index.ts

[stratboy]

Thank you, you're right IntersectionObserver could be polyfilled IF unsupported browsers were an issue. But honestly, most of them are not supported even by very big socials and groups. IntersectionObserver can in fact be considered fully supported and a safe asset in production environment.

As per your other suggestion: what I tried to explain is that I need countup to start right BEFORE the numbers come into view.
For sure, it's better (and I'll do) if I use a wrapper as you suggested, thank you. But mainly because that way, timings have more fidely. Itself, is not going to solve the issue, because the user can stop scrolling just in the point that zeros are almost totally in view, therefore perfectly readable, but not yet triggering the animation. In my opinion, zeros must never ever be visible if no animation is running. Animation should by default start as soon as numbers hit the intersection to zero threshold.