<script>
function animateValue(id, start, end, duration) {
const obj = document.querySelector(id);
const range = end - start;
const steps = 60;
const increment = range / steps;
const stepTime = duration / steps;
let current = start;
let stepCount = 0;

const timer = setInterval(() => {
current += increment;
stepCount++;
obj.textContent = Math.floor(current).toLocaleString('nl-NL');
if (stepCount >= steps) {
obj.textContent = Math.floor(end).toLocaleString('nl-NL');
clearInterval(timer);
}
}, stepTime);
}

// Observer die de animatie activeert bij scrollen
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const target = entry.target;
if (target.id === "m1573") {
animateValue("#m1573 > p", 0, 780879, 700);
} else if (target.id === "m4659") {
animateValue("#m4659 > p", 0, 24344, 700);
} else if (target.id === "m3168") {
animateValue("#m3168 > p", 0, 7823, 700);
}
obs.unobserve(target); // Start slechts één keer
}
});
}, { threshold: 0.8 }); // Pas starten als 80% in beeld is

// Start observer
document.addEventListener("DOMContentLoaded", function() {
observer.observe(document.querySelector("#m1573"));
observer.observe(document.querySelector("#m4659"));
observer.observe(document.querySelector("#m3168"));
});
</script>