MoreLesson 270Free preview

Section Counter

This lesson is part of How To · All levels

Summary

The section counter displays statistics that increase from zero to the target value. JavaScript reads the values from the data attributes, and then animates the numbers using the requestAnimationFrame. Animation should begin when the piece is visible so that the visitor can actually witness it.

Key points

Save the target values on the data attributes of the targets to make JavaScript easy to read.
QuerySelectorAll allows all the calculators to be processed at once.
IntersectionObserver starts the animation when the element enters the viewport.
The requestAnimationFrame produces a smooth and cost-effective number update.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.