Annotated Source Code: Counter

This is a pretty basic custom element but it uses some fun browser features. IntersectionObserver let’s us know when the element has scrolled into the viewport and MutationObserver fires a callback when the element’s contents have changed.

This code also performs an animatjion in JavaScript with no dependencies. Many people instinctively reach for a library like GSAP or Popmotion, but the vanilla approach is dead simple to implement. This component even includes a hand-rolled easing function in one line. Learning this technique will help you understand what those libraries are doing under the hood and use them more effectively.