Counter Animation
Animate numbers from zero to a target when they scroll into view — a popular homepage statistics effect.
jQuery
Intermediate
4 min read
Animated Number Counter
Example
function animateCounter($el) {
const target = parseInt($el.data("target"), 10);
$({ val: 0 }).animate({ val: target }, {
duration: 1500,
easing: "swing",
step: function() { $el.text(Math.ceil(this.val).toLocaleString()); },
complete: function() { $el.text(target.toLocaleString()); }
});
}
const observer = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { animateCounter($(e.target)); observer.unobserve(e.target); } });
});
$("[data-target]").each((i, el) => observer.observe(el)); Pro Tip
IntersectionObserver triggers counters only when visible — no wasted animation on hidden elements.