GSAP Counter element

Table Of Contents

The GSAP Counter is an animated counter built with GSAP. By linking a custom CSS variable to the counter element, its parent, or any custom element, you can create engaging progress bars and other effects.

You can copy these sections and paste them on your website by clicking on the COPY SECTION button under each section.

Regular counters

Support for negative and decimal numbers, along with custom prefixes and suffixes.

0 °C

-100 %

$ 0

Advanced counters

A custom CSS variable is added to the parent element, which make you able to build your own circular progress bars

0

only

$ 0

0

Advanced SVG counters

Different technique but still with the CSS variable added to the parent element

0 %

More advanced counters

You can also add a custom CSS variable to another element. This allows you to build almost anything you want, as the variable is linked to the counter.

Webdesign

0 %

WordPress

0 %

Code

0 %

0 px

360 °